Как прижать footer (футер) к низу окна браузера

При верстке различных макетов иногда приходится продумывать способы решения нестандартных задач, например, необходимо иногда нужно прижать footer (нижний блок или как его еще называют «подвал») к низу html-страницы. Как же это сделать? Сразу скажу, что в Интернете можно найти описания и примеры разных способов, но зачастую в каждом способе есть свои плюсы и минусы. В этой статья я покажу хороший способ закрепления футера внизу страницы.

Как прижать footer к низу страницы

 

Прижимаем footer к низу страницы.

Итак, представим, что у нас есть такой html-код страницы:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title></title>
<style type=»text/css»>
#footer{height:100px;background:#00afdd;}
</style>
</head><body>
<div id=»wrapper»>
<div id=»main»>
<div id=»txt»>
Lorem ipsum dolor…<br>Lorem ipsum dolor…<br>Lorem ipsum dolor…
</div>
</div>
<div id=»footer»></div>
</div>
</body>
</html>

Итак, мы видим общий блок с идентификатором wrapper, внутри которого размещен блок main и footer.

Если мы откроем полученную страницу в браузере то увидим, что сразу после основного текста страницы идет блок footer. Но нам нужно это исправить, нам нужно сделать так, чтобы вне зависимости от количества информации в блоке main footer был прижат к низу веб-страницы.

Для этого мы добавим вот такие строки CSS-кода:

html,body{height:100%;}
body{margin:0;}
#wrapper{height:100%}
#main{min-height:100%;margin-bottom:-100px;}
#txt{padding-bottom:100px;}

Этим мы добьемся нужного результата, а именно, все-таки прижмем футер к низу страницы. Для того чтобы текст не наползал на футер блоку txt было задано следующее правило:

#txt{padding-bottom:100px;}

Вот полный  исходный HTML-код, полученный в результате:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title></title>
<style type=»text/css»>
html,body{height:100%;}
body{margin:0;}
#wrapper{height:100%}
#main{min-height:100%;margin-bottom:-100px;}
#txt{padding-bottom:100px;}
#footer{height:100px;background:#00afdd;}
</style>
</head><body>
<div id=»wrapper»>
<div id=»main»>
<div id=»txt»>
Lorem ipsum dolor…<br>Lorem ipsum dolor…<br>Lorem ipsum dolor…
</div>
</div>
<div id=»footer»></div>
</div>
</body>
</html>

Теперь Вы знаете как решить интересную задачу по прижатию футера к низу веб-страницы. Можете теперь попробовать сделать свою страницу с прижатым футером.

Удачи!

Запись опубликована в рубрике CSS. Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>