Сделать Диву палку вниз родитель

Я пытаюсь создать макет здесь, в которой выглядит следующим образом: Вот 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>

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

источник

2013-12-09 user1240679

Вы всегда можете сделать высоту своего div в процентах. Заголовок 5%, тело 90%, нижний колонтитул 5%. Я не уверен, что проценты недовольны, но это должно сработать. –

[это может помочь] (http://jsfiddle.net/peteng/9DLeg/) - просто поместите контент и потоковое содержимое в средний раздел. – Pete

Добавить position:relative в класс вашего урожая. Добавить position:absolute;bottom:0; в класс потока.

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

источник

2013-12-09 15:57:34

Эй Спасибо за ответ. Но я заметил, что красный нижний колонтитул, который, как я думал, был липким, снижается, когда я добавляю много вопросов в раздел «контент». Я сделал этот липкий нижний колонтитул, смотрящий на css-трюки здесь: http://css-tricks.com/snippets/css/sticky-footer/, но теперь он больше работает. Есть что-то, что я пропустил здесь? Было бы здорово получить некоторую помощь. – user1240679

Итак, вы хотите, чтобы он придерживался нижней части браузера или нижней части wraper? –

Это не имеет никакого отношения к обертке. Позиция «fixed» относится к окну просмотра экрана, а не к родительскому элементу. –

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

источник

2013-12-09 15:49:21 user3034378

Ссылка сломана. Я попытался бы найти архивированную версию, но это robots.txt запрещает индексирование. – carefulnow1

Сделать Диву палку вниз родитель

ответ

Смежные вопросы