Как создать div для заполнения всего пространства между заголовком и нижним колонтитулом div

Я работаю над переходом от использования таблиц к макету с использованием div (да, да, великие дебаты). У меня есть 3 divs, заголовок, содержание и нижний колонтитул. Верхний и нижний колонтитулы по 50 пикселей. Как мне получить нижний колонтитул, чтобы он оставался в нижней части страницы, и содержимое div, чтобы заполнить пробел между ними? Я не хочу жестко кодировать высоту div div контента, потому что разрешение экрана может измениться.

Ответ 1

Подводя итог (и это произошло из CSS Sticky Footer, предоставленного Traingamer), это то, что я использовал:

html, body 
{ 
    height: 100%; 
} 

#divHeader
{
    height: 100px;
}

#divContent
{
    min-height: 100%; 
    height: auto !important; /*Cause footer to stick to bottom in IE 6*/
    height: 100%; 
    margin: 0 auto -100px; /*Allow for footer height*/
    vertical-align:bottom;
}

#divFooter, #divPush
{
    height: 100px; /*Push must be same height as Footer */
}

<div id="divContent">
    <div id="divHeader">
        Header
    </div>

    Content Text

    <div id="divPush"></div>
</div>
<div id="divFooter">
    Footer
</div>

Ответ 2

Flexbox решение

Используя гибкую компоновку, мы можем достичь этого, учитывая естественный верхний и нижний колонтитулы высоты. Как верхний, так и нижний колонтитулы будут располагаться сверху и снизу окна просмотра соответственно (подобно родному мобильному приложению), а основная область содержимого заполняет оставшееся пространство, в то время как любое вертикальное переполнение будет прокручиваться в пределах этой области.

См. JS Fiddle

HTML

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>

CSS

html, body {
  margin: 0;
  height: 100%;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

header,
footer {
  flex: none;
}

main {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  flex: auto;
}

Ответ 3

Чтобы расширить ответ на вопрос Mitchel Sellers, дайте свой контент div height: 100% и дайте ему автомаршрут.

Подробное объяснение и пример см. в разделе Ryan Fait CSS Sticky Footer.

Поскольку вы знаете размер (высоту) вашего заголовка, поместите его внутри div (или используйте поля).

Абсолютная позиция даст вам проблемы, если ваш контент больше (выше), чем окно.

Ответ 4

если вы пытаетесь максимизировать высоту своего содержимого div, в CSS add

высота: 100%;

Ответ 5

#footer {
 clear: both;
}