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!

Answers


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

Check it here. Fiddle


If I understand correctly then one way to do it would be to put [steam content] outside the wrapper, as wrapper is the one that is keeping the footer at the bottom. If you must have the [steam content] inside wrapper than you can try something like this http://ryanfait.com/sticky-footer/ to keep it at the bottom together with the footer


Need Your Help

is there any IE8 only css hack?

css internet-explorer-8 conditional-comments

For Internet Explorer 8 (IE8) I'd like to use the following CSS:

Subset dataframe by multiple logical conditions of rows to remove

r dataframe subset

I would like to subset (filter) a dataframe by specifying which rows not (!) to keep in the new dataframe. Here is a simplified sample dataframe: