I have a page that I am trying to create with a div on the left containing an iframe and a div in the middle also containing an iframe.
The sidebar is to hold links and the content section is to load said links.
My goal is to get the sidebar expanded all the way down to the bottom of the page as well as the content section.
Here is my css:
html, body {
height:100%;
margin:0px;
padding:0px;
}
#wrapper {
position: relative;
min-height: 100%;
}
#sidebar {
position: relative;
float:left;
width: 150px;
overflow: hidden;
min-height: 100%;
}
#pdfholder {
float: right;
width: 600px;
}
And here is my html:
<body>
<div id="wrapper">
<div id="sidebar">
<iframe id="sidebarframe" name="index" src="./sidebar.html">
</iframe>
</div>
<div id="pdfholder">
<iframe id="pdfholderframe" name="viewer" src="./blank.html">
</iframe>
</div>
<div style="clear: both;"></div>
</div>
</body>
I know I am doing something wrong but I have gone through around 10 different websites and I cannot for the life of me find it!
You can give both containing divs a min-height of 100% and there’s not much more you need to do:
http://jsfiddle.net/GolezTrol/eHMec/
You can give the iframes a height of 100% too, but it didn’t become clear to me whether you need that or not.