I've been working on making an iframe adjust to fit the screen size, regardless of the user's resolution. However, no matter what I do, I can't seem to get it just right. It always ends up either too small or with a double scroll bar issue (both for the iframe and the page).
My goal is to have the iframe occupy 85% of the page's width (which is working fine), be positioned 100px from the top of the screen (also achieved), and then seamlessly reach the bottom edge of the browser window (struggling with this part...)
HTML
<div id="maindiv" class="maindiv">
<iframe id="theiframe" class="iframeautowidth" seamless src="http://whateverdomain.com></iframe>
</div>
CSS:
.maindiv {
width: 85%;
top: 100px;
}
.iframeautowidth {
left: 0px;
top: 0px;
bottom: 0px;
width: 85%;
height: 100%;
border: 0
overflow: hidden;
display: block;
margin: 0;
float: left;
}
If it helps, I also have the latest version of jQuery running on my page. Any assistance would be greatly appreciated! Thank you!