Как заставить последнее отделение простираться для заполнения экрана?
У меня есть сайт, который я пытаюсь создать, и я наткнулся на тот мало препятствия, это управляет мной безумный. По существу, на страницах без достаточного количества содержания для заполнения области просмотра я хочу иметь последнее отделение (мой нижний колонтитул) остальная часть заливки области просмотра, но это в настоящее время отключается.
Мой HTML похож на это:
<body>
<div id="header"> </div>
<div id="subNav"> </div>
<div id="content"> </div>
<div id="footer"> </div>
</body>
Я пытался использовать html, body, footer { height:100%; } но это создает намного больше пространства, чем необходимый, по существу полноэкранная длина пустого содержания в нижнем колонтитуле.
Как я получаю свой нижний колонтитул только для заполнения остальной части экрана, не добавляя полосу прокрутки?
Заранее спасибо, Один Расстроенный Кодер.
2 ответа
Я почти уверен, что единственный способ сделать это - вычислить абсолютную высоту остатка.
Т.е., с jQuery
$('#footer').height( ($(window).height() - $('#header').height() - $('#subNav').height() - $('#content').height()) + "px" );
Вы бы хотели сделать это при изменении размера окна, чтобы разрешить динамическое изменение размера окна.
$(window).resize(function(){...});
Если вы не хотите идти по маршруту jQuery, версия для бедняков дает #content минимальную высоту, которая заставит его работать в большинство дисплеев, и / или добавив в нижний колонтитул большого количества отступов внизу. В некоторых случаях это может вызвать полосу прокрутки, поскольку вы просто контролируете, насколько короткой может быть страница.
(Или вы можете просто принять это как ограничение среды. Например, при переполнении стека нижний колонтитул помещается над пробелом, если страница слишком короткая.)