user1240679 user1240679 - 5 months ago 13
CSS Question

Make a div stick to bottom of parent

I am trying to create a layout here in which looks like the following: Here's the fiddle

<body>
<div class="wrapper">
<div class="header">
Header
</div>
<div class="content">
This is the content section
</div>
<div class="stream-content">
This is the stream content.
</div>
<div class="push">
</div>
</div>
<div class="footer">
</div>
<body>


I want the
content section
to take up the full space between the
header
and
footer
section. There is an additional section called [
stream-content
] which if there (will be there only on home page) has to take the position just before the
footer
. And in that case, the
content
section should take up space all the between
header
and
stream-content
section. I tried doing the same with absolute positioning but all my elements were going haywire, so wanted to understand the correct way of doing this. Thanks in advance for all help!

Answer

Add position:relative to your wraper class. Add position:absolute;bottom:0; to the stream-content class.

Check it here. Fiddle