Липкий нижний колонтитул с содержимым div, горизонтально центрированным и 100% в высоту

Question

Я пытаюсь включить липкий нижний колонтитул и/или заголовок на сайт, где содержание на каждой странице колеблется, некоторые страницы имеют только абзац или меньше текста, а некоторые имеют несколько абзацев.

Я хочу, чтобы белый фоновой div заполнил 100% страницы между верхним и нижним колонтитулом, чтобы независимо от того, сколько контента на странице или насколько велико разрешение зрителя на белом div будет 100% вертикально (. минус верхний и нижний колонтитулы)

я ковырялся с этой областью кода:

#middle-cell { 
    vertical-align:top; 
    height: 100% 
} 

Вот my fiddle того, что я до сих пор.

Но до сих пор я не смог заставить его работать.

Answer 1

CodePen

CSS не имеет прямой способ автоматического заполнения оставшуюся высоту контейнера (не считая некоторые не полностью поддерживаемые функции Flexbox).

Если у вас заголовок с фиксированной высотой, процентная высота для контента никогда не будет работать должным образом, потому что фиксированная высота действительно отличается от области просмотра при каждом размере.

Решение добавить новый position: absolute DIV, что оборачивает содержание страницы, он действует как новый «вьюпорт» при подключении всех четырех сторон, где вам нужно.

Если ваш заголовок height: 60px, то вы можете прикрепить края вашей новой обертке, как это:

• top: 60px - прикрепляет верхний край ниже вашего заголовка
• bottom: 0; left: 0; right: 0 - прикрепляет влево/вправо/нижние края из div к краю тела.

Что приятно, что браузер делает знать, как рассчитать высоту этого DIV, так что если у вас есть div.content внутри него установлен height: 100% 100% относится к высоте оставшегося пространства экрана после того, как заголовок.

Если div.content имеет слишком много текста/носителя и длиннее, чем оболочка, просто используйте overflow-y: scroll на обертке div, и он позволит вам прокручивать содержимое.