Всем привет, этот пост будет посвящен тому как разместить футер внизу страницы. Довольно часто мы сталкиваемся с ситуацией, когда на странице мало контента и футер едет вверх и тут встает перед нами вопрос как же прижать футер к низу страницы?. Когда мало контента, то футер может оказаться посредине страницы, а это чаще всего смотриться некрасиво, да и из-за дизайна не хочется расстраиваться, ведь так старался, а тут раз и футер не внизу страницы.
Расскажу Вам о том, как можно очень просто прижать футер к низу страницы.
Пример 1 как прижать футер внизу страницы:
Заключаем весь контент, кроме футера в блок с id=”content”, прописываем для него относительное позиционирование и растягиваем по вытоте на весь экран. Ниже, относительно него располагаем блок футера. Важно знать высоту футера, чтобы поднять его вверх на это расстояние.
Вот и все 
. Осталось только прописать хак для любимого «ослика» и поставить блок-распорку внизу блока content, чтобы контент в основном блоке не заезжал под футер.
Пример 2 как прижать футер к низу страницы:
рассмотрим более подробно, в этом HTML коде видно как происходит размещение футера внизу страницы
<!DOCTYPE>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<title>Футер внизу страницы</title>
<style type=»text/css»>
html { height: 100%;}
body { position: relative; min-height: 100%; margin: 0;}
#header, #footer { min-width: 700px; height: 100px;}
#content { width: 700px; margin: 0 auto; padding-bottom: 100px;}
#footer { position: absolute; bottom: 0; width: 100%;}
</style>
<!—[if lt IE 7]>
<style type=»text/css»>
body { height: 100%;}
</style>
<![endif]—>
</head>
<body>
<div id=»header»>Футер</div>
<div id=»content»>внизу</div>
<div id=»footer»>страницы</div>
</body>
</html>
|
22nd Фев 2010
|
Между нами говоря, по-моему, это очевидно. Попробуйте поискать ответ на Ваш вопрос в google.com
Интересная статья, автору респект!
Здесь не может быть ошибки?
Нет, тут нет ошибки, сам пробовал этот метод прижатия футера к низу, заработало!
чушь полная!
в этом примере известна высота блока main а как поступить если она резиновая??? БЭ….
дописываем к main >> padding-bottom: ##px;
а к футеру margin-top: -##px; + знаем какая высота футера тогда будет чудо!
где ## высота футера.
Но вот ёптэ, и это не поможет мне решить одну задачку T_T