set the iframe height automatically

Question

I need to embed an HTML page inside a frame, and am using the following code:

<iframe src="http://www.google.com" style="width: 90%; height: 300px"
    scrolling="no" marginwidth="0" marginheight="0" frameborder="0"
    vspace="0" hspace="0">

I am trying to make the height set to auto so that the frame auto resizes to the page length without having to hardcode the height as I am doing here. I tried height:auto and height:inherit but it did not work.

Answer 1

Try this coding

<div>
    <iframe id='iframe2' src="Mypage.aspx" frameborder="0" style="overflow: hidden; height: 100%;
        width: 100%; position: absolute;"></iframe>
</div>

Answer 2

Solomon's answer about bootstrap inspired me to add the CSS the bootstrap solution uses, which works really well for me.

.iframe-embed {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    border: 0;
}
.iframe-embed-wrapper {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}
.iframe-embed-responsive-16by9 {
    padding-bottom: 56.25%;
}
<div class="iframe-embed-wrapper iframe-embed-responsive-16by9">
    <iframe class="iframe-embed" src="vid.mp4"></iframe>
</div>