DIVs are anchored to the top and bottom of the parent div
This is probably a very bogus question, don't throw your shoes at me :)
Think of the HTML as:
<div class="container">
<div class="header">
</div>
<div class="body">
</div>
<div class="footer">
</div>
</div>
I want the "header" and "footer" to snap to the parent top and bottom respectively, and the "body" to expand easily to fit all available space. What would the CSS look like for this?
EDIT: Maybe I'm saying this wrong (I'm not really a web developer :)), but I need some part of the div to always be anchored to its bottom. So when the div grows, that part (which may be of a fixed size) will shrink to the bottom of the div. But none of this means attaching a div to the bottom of the browser window.
a source to share
If I understand your question correctly, you need some really basic css.
body { background: black; }
.container { width: 960px; }
.header { height: 100px; background: #ddd; }
.content { padding: 10px; }
.footer { height: 100px; background: #ddd; }
Your div doesn't float, so will stack on top of each other like pancakes.
If you want the footer to be "sticky" see here for a solution ... http://ryanfait.com/sticky-footer/
a source to share
Here you go:
this will have the right to content
between the footer and header.
does not overlap.
Html
<header>HEADER</header>
<article>
<p>some content here (might be very long)</p>
</article>
<footer>FOOTER</footer>
CSS
html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }
body:after{
content:'';
display:block;
height:100px; // compensate Footer height
}
header{ height:50px; }
footer{
position:absolute;
bottom:0;
width:100%;
height:100px; // height of your Footer (unfortunately it must be defined)
}
a source to share