Ok, I'm not seeing your CSS for the #content_subdiv in the question...?
Chris Cox
2010-10-15 19:35:20
A:
try scrolling within the code block?
krefftc
2010-10-15 19:39:26
Sorry, blind. Mea culpa. If you set a specific value on the height of the div#content, does #content_subdiv then display as expected?
Chris Cox
2010-10-15 19:47:08
Ok, gave in to curiosity and created a page using your markup. What's the desired behaviour? Using what you have there, your div#content is set to a calculated height of the viewport, but div#content_subdiv is attempting to take 100% of that value. Problem is that adding div#content_subdiv is actually increasing the height of the viewport by the height of the contents of #viewport_subdiv, so it can't actually be calculated. I think.
Chris Cox
2010-10-15 19:58:47
Sorry, meant "the contents of #content_subdiv" there.
Chris Cox
2010-10-15 20:04:55
The desired behavior is that #content_subdiv should stick to the bottom of the page as does the #content div. So it's not possible?
krefftc
2010-10-15 20:16:24
Stick to the bottom of the page and be 100% of the height of its container? You're going to have to float it or absolutely position it if you want it to flow alongside its sibling elements.
Chris Cox
2010-10-15 20:17:22
For example, you could set: #content {padding-right: 200px;} and #content_subdiv {position: absolute; bottom: 0; right: 0; width: 200px; height: 100%;}
Chris Cox
2010-10-15 20:23:47
A:
You can only apply min-height:100% to the first element of the body.
Put the header inside the content div or create a min-height:100% wrapper div.
wmil
2010-10-15 20:10:51
A:
Try this code then :
html,body { margin:0; padding:0; height:100%; /* needed for container min-height */ background:gray ; font-family:arial,sans-serif; font-size:small; color:#666; }
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:750px;
background:#f0f0f0;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header {
padding:1em;
background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom:6px double gray;
}
div#content {
padding:1em 1em 5em; /* bottom padding for footer */
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#content_subdiv{
padding:1em 1em 5em; /* bottom padding for footer */
background:#999;
color:#fff; }
< div id="header ">
< h1 >CSS layout: 100% height with header and footer</ h1 >
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget massa dolor, rhoncus tempor nunc. Donec tempor odio eget purus vehicula auctor. </p>
</div>
<div id="content">
<p>
Aenean quam mauris, iaculis non aliquet quis, facilisis sed turpis. Cras id erat velit, nec bibendum erat. Vivamus feugiat purus vitae velit dictum in vestibulum ante tristique. Vestibulum ut massa vel justo eleifend consectetur eget ut nisi. Phasellus ut diam nulla. Suspendisse potenti. Praesent blandit gravida facilisis. Donec elementum faucibus gravida. Nullam nec enim velit, ac scelerisque justo. Pellentesque lacus metus, adipiscing nec congue a, volutpat sollicitudin eros. Donec tortor leo, tempor non viverra at, molestie sed dui. Nullam ipsum purus, tempus elementum tincidunt id, iaculis at lectus. Vestibulum viverra mi in mauris ultrices sollicitudin
</p>
</div> <div id="content_subdiv"> this sub div not stretching to 100%; <br /> this sub div not stretching to 100%; <br /> this sub div not stretching to 100%; <br /> this sub div not stretching to 100%; <br /> this sub div not stretching to 100%; <br /></div>
Winthan Aung
2010-10-15 21:50:03
close, but no cigar. What this code does is make the #content_subdiv act as a footer and stretch the content.
krefftc
2010-10-19 12:48:35