Те, кто учит html5 и css3 с нуля должны знать, как прижать  footer к низу экрана, а точнее к низу окна браузера. Что означает «прижать footer к низу экрана»? Это означает, что когда содержимое страницы, а именно контента, который находиться между хедером (шапкой) и футером (подвалом) мало, то footer все равно остается внизу экрана, а точнее в низу окна браузера. Так вот, прижать footer к низу экрана означает, что как бы вы не изменяли размер окна браузера, footer всегда будет внизу окна. Если размер окна не будет умещать в себе  контент и футер, тогда появиться  прокрутка.

прижать footer к низу экрана — это норма

Почему нужно прижать  footer к низу экрана? Это такое требование по умолчанию, норма которую нужно запомнить и исполнять, тем более, что  прижать  footer к низу экрана довольно просто. Иногда дизайнер может сделать макет, в котором не нужно прижимать footer к низу экрана, но не делать то что вы уже умеете легко 🙂 В 99% при создании сайтов нужно  прижать footer к низу экрана (к низу окна браузера). Кроме этого, прижать footer к низу экрана (к низу окна браузера) нужно чтобы сайт коректно отображался по длине на разных мониторах и расширениях экрана.

прижать footer к низу экрана  — это просто

Запомните: прижать footer к низу экрана (к низу окна браузера)  означает коректное отображения сайта по длине, несмотря на количество контента, на разных мониторах: например на 13 дюймовом нетбуке, или на 24 дюймовом настольном мониторе. Также — прижать footer к низу экрана (к низу окна браузера) означает не  беспокоиться о том, какое расширения экрана стоит у пользователя, 1920 на 1080 или 800 на 600, сайт будет правильно отображаться по длине при любом расширении, от которого напрямую зависит размер окна браузера.

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

Как прижать footer к низу экрана

Для того чтобы прижать footer к низу экрана (к низу окна браузера), нужно прописать отрицательный margin по оси «y»,  на столько пикселей, сколько есть высота футера, далее для того, чтобы футер не залазил на контент используеться небольшая хитрость со слоем .container. Итак, открывайте свой тренеровочный index.html и скопируйте туда следуючий код:

<!doctype html>  
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body>
<div class="wrapper">
<!-- Header -->
<header>
Header Text
</header>
<!-- Header END-->
<!-- Content -->
<div class="container">
Content Text
</div>
<!-- Content END -->
</div>
<!-- Wrapper END -->
<div class="clearing"></div>
<!-- Footer -->
<footer>
Footer Text
</footer>
<!-- Footer END -->
</body>
</html>

В style.css скопируйте следующие стили:

body {color:#fff; background-color:#fff; margin:0; padding:0;}
aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, article {display: block;}
html, body {width:100%;height:100%; padding: 0; margin: 0;}
.clearing{ clear: both;display: inline;width: 100%;height: 0;overflow:hidden;} 
.wrapper { width: 990px; margin:0px auto; padding:0px 0px 0px 0px; position:relative; min-height: 100%; height: auto!important; height: 100%;background: #ccc;}
.container { width: 100%; height: 1%; position:relative; padding: 10px 10px 50px;}
.container:after { content: '.'; display: block; clear: both; visibility: hidden; height: 0;}
footer { height: 50px; width: 990px; margin:-70px auto 0; padding:10px; position:relative; overflow:hidden; text-align: left; background: #f2940d;}
header{position: relative; width: 990px; height:100px; margin: 0 auto; padding:10px;background: #108f19;}

Получиться у Вас вот так:

Как прижать footer к низу экранаФутер всегда будет внизу экрана

Спасибо за внимание, пользуйтесь. Что важно, этот метод «Как прижать footer к низу экрана» не теоретический, а из практики, работает во всех браузерах.