Контент со 100% между верхним и нижним колонтитулом

Предположим, что у меня есть следующий макет (см. рисунок ниже)... У меня есть заголовок (A) наверху, нижний колонтитул (C), который всегда находится внизу, и контейнер (B), который находится посередине и должен заполнить пробел между заголовком и нижним колонтитулом на 100%.

enter image description here

Невозможно думать о том, как достичь этого, используя чистый css. Любые идеи будут оценены!

Ответы

Ответ 1

В зависимости от того, как настроена ваша страница, она может работать, если для элемента контейнера установить height: 100%; для (B) и position: absolute;. Вот пример:

HTML:

<div id="container">
    <div id="header"></div>
    <div id="body"></div>
    <div id="footer"></div>
</div>​

CSS

#container {
    height: 100%;
    width: 100%;
    background: green;
    position: absolute;
}
#header, #footer {
    height: 100px;
    width: 100%;
    background: red;
}
#body {
    height: 100%;
    width: 100%;
    background: blue;
}​

jsFiddle

Ответ 2

Ваш вопрос в значительной степени описывает, как ведут себя стандартные элементы блочного уровня, такие как DIV. Центр div всегда будет занимать 100% пространства между ними, и он будет расти на основе внутреннего содержимого.

Тем не менее, я собираюсь предположить, что вам нужен нижний колонтитул FIXED, который находится в нижней части окна браузера. Это достигается с помощью ряда методов, один из которых использует абсолютное позиционирование:

<div id="header">Header</div> 
<div id="content">Main Content</div> 
<div id="footer">Footer</div>

Стиль:

#header, #footer, #content { position: absolute; left: 0; width: 100%; }
#header, #footer { overflow: hidden; background: #444; height: 100px; }
#header { top: 0; }
#content { top: 100px; bottom: 100px; overflow: auto; background: #CCC; }
#footer { bottom: 0; }​

http://jsfiddle.net/U9wfy/

Ответ 3

Я столкнулся с этим вопросом и подумал, что более "современный" ответ будет полезен. Этот макет легко использовать с помощью flexbox..

https://www.codeply.com/go/1QgRb4uFmj

<header>
</header>
<main></main>
<footer>
</footer>

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

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

header,
footer {
  flex: none;
  background: #ddd;
}

main {
  overflow-y: scroll;
  flex: auto;
}