Сделайте палку "div" на дне родителя

Я пытаюсь создать макет здесь, который выглядит следующим образом: Здесь скрипка

<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>

Я хочу, чтобы content section занимал все пространство между header и разделом footer. Существует дополнительный раздел, называемый [ stream-content ], который, если он есть (будет только на главной странице), должен занять позицию непосредственно перед footer. И в этом случае секция content должна занимать все пространство между header и секцией stream-content. Я пытался сделать то же самое с абсолютным позиционированием, но все мои элементы работали с треском, поэтому хотел понять, как это сделать правильно. Заранее спасибо за помощь!

Ответ 1

Добавьте position:relative в свой класс wraper. Добавьте position:absolute;bottom:0; в класс содержимого потока.

Проверьте это здесь. Fiddle

Ответ 2

Если я правильно понял, один из способов сделать это должен был бы поставить [steam content] за пределы обертки, поскольку оберткой является та, которая поддерживает нижний колонтитул внизу. Если у вас должна быть внутренняя оболочка [steam content], чем вы можете попробовать что-то вроде http://ryanfait.com/sticky-footer/, чтобы держать ее внизу вместе с нижним колонтитулом