CSS: #footer {position: absolute; bottom: 0;} // Mash
Вопрос о том, как сделать подвал внизу экрана/страницы возникает достаточно часто. Казалось бы, что может быть проще:
HTML:
<body>
<p>content</p>
<p id="footer">footer</p>
</body>CSS:
#footer {position: absolute; bottom: 0;}Все счастливы. Правда, счастье длится лишь до тех пор, пока содержимое страницы не вызывает появления вертикальной полосы прокрутки, наползая на подвал (IE, Mozilla).
Решение:
HTML:
<body>
<div id="all">
C O N T E N T
<div id="empty"> </div>
<div id="footer">
F O O T E R
</div>
</div>
</body>CSS:
html, body {height: 100%; margin: 0; padding: 0;}
#all {position: relative; height: 100%;}
html>body #all {height: auto; min-height: 100%;}
#empty, #footer {height: _foo_;}
/* или
#footer {height: _foo_;}
#empty {height: _foo_ + _bar_;}
*/
#footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}Логика: внутри body со стопроцентной высотой и нулевыми отступами расположен блок #all с высотой 100% и более. Его позиция относительно body высчитывается в соответствии с нормальным расположением (position: relative;). #footer расположен внизу относительно высоты содержащего его блока #all. Так как #footer позиционирован абсолютно (изъят из нормального обтекания), то потребуется «пустой» блок (#empty), который будет служить «толкателем».
Недостаткок: предполагается, что значения высоты #footer и #empty известны.
Для случаев графического (px) подвала и/или известном поведении текста (em) внутри него, такое решение проблемы можно считать оптимальным.
В тех случаях, когда невозможно заранее предсказать высоту подвала, в бой вступает javascript:
CSS:
#empty {visibility: hidden;}
#footer, #empty {height: _foo_;}
/* предполагаемая максимальная высота
(disabled JavaScript) */
JavaScript:
if (document.getElementById){
var empt = document.getElementById('empty');
var foot = document.getElementById('footer');
empt.style.height = foot.style.height = 'auto';
empt.innerHTML = foot.innerHTML;
}
Посмотреть:
14 октября 2003