I'm working on a layout that includes a fixed footer and header. My goal is to make the height of the "info-box" div variable, while having the "scrolling-div" fill the remaining vertical space in the right column. The issue arises when setting the height of scrolling-div to 100%; it ends up being as tall as the right column instead of taking up the remaining space, as shown in this fiddle.
Below is the HTML code for the page:
<body>
<div id="header">
</div>
<div id="main-container">
<div id="page-content">
<div id="left-column">
</div>
<div id="right-column">
<div id="info-box">
This is a variable height div</div>
<div id="scrolling-div">
Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> ...
</div>
</div>
</div>
</div>
<div id="footer">
</div>
</body>
Here is the CSS code:
body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#header {
position:fixed;
height:45px;
width:100%;
background-color:#FF0000;
top:0;
}
#footer {
position:fixed;
height:45px;
width:100%;
background-color: #FF00FF;
bottom:0;
}
#main-container {
background:#00FF00;
position:absolute;
top:45px;
bottom:45px;
width:100%;
}
#page-content {
width:960px;
position:relative;
margin: 0 auto;
background-color:#FFF000;
height:100%;
}
#left-column {
background-color:#444444;
width:400px;
height:100%;
float:left;
}
#right-column {
background-color:#0000FF;
float:right;
width:560px;
z-index:10000;
height:100%;
}
#info-box {
width:100%;
height:200px;
background-color:#0F0F0F;
color: #FFFFFF;
}
#scrolling-div {
background-color:#FFFFFF;
height:200px;
overflow:scroll;
}
For a visual demonstration, visit this fiddle.
Thank you for your assistance!