I have a standard webpage layout with a fixed header and a sticky footer. However, I am struggling to figure out how to make the div heights extend to fill the entire window area.
HTML
<header>
header header header
</header>
<div id="page">
<div id="left">side bar side bar</div>
<div id="right">
<p>I want to draw a brown dashed line all the way down to the footer, even when the #right content is not enough to fill the window.</p>
<p>I understand that I need to set height: 100% on #right so that it stretches to fill the green box. However, the green box itself does not stretch to the bottom because the yellow box does not have an explicitly defined height.</p>
<p>What should I do in this situation?</p>
</div>
</div>
<footer>
footer footer footer
</footer>
CSS
html, body, foot, header, div { padding: 0; margin: 0; box-sizing: border-box; }
p { margin-top: 0 }
html { height: 100%; min-height: 100%; }
header { position: fixed; background-color: red; height: 50px; width: 100%; }
footer { position: absolute; bottom: 0; width: 100%; background-color: cyan; }
body {
position:relative; /* container for footer */
border: 5px solid yellow;
min-height: 100%; /* not specifying height to allow footer to be pushed downwards */
}
#page {
padding: 60px 0 20px 0;
border: 5px solid green;
height: 100%; /* experiencing issues: how can I extend page to the bottom, ensuring at least the window size? */
}
#page:after { content:""; display: block; clear:both; }
#left { float: left; width: 100px; }
#right {
margin-left: 100px;
padding-left: 10px;
/* goal: create a vertical divider between #right and #left that reaches the footer */
height: 100%;
border-left: 5px dashed brown;
}