Ті, хто вчить 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 до низу екрану” не теоретично, а практично працює у всіх браузерах.