Не так давно меня попросили показать, как прижать футер к низу . Подобная проблема встаёт только у блочной вёрстки. И, к сожалению, оптимального варианта нет, но в данной статье я покажу, как прижимаю футер к низу я при вёрстке сайтов.
Не так давно меня попросили показать, как прижать футер к низу. Подобная проблема встаёт только у блочной вёрстки. И, к сожалению, оптимального варианта нет, но в данной статье я покажу, как прижимаю футер к низу я при вёрстке сайтов.
Допустим, есть такой HTML-код:
<body>
<div id="main">
<p>Текст</p>
</div>
<div id="footer">
<p>Подвал</p>
</div>
</body>
Чтобы прижать футер к низу, надо применить к данному HTML-коду следующий CSS-код:
html {
height: 100%;
}
body {
height: auto !important; //Обязательно, если контента в main будет много
height: 100%;
min-height: 100%;
}
#main {
padding-bottom: 50px;
}
#footer {
bottom: 0;
height: 50px;
position: absolute;
}
Здесь всё прозрачно, но скажу только, что строчка "height: auto !important;" позволяет учитывать то, что если контента в main будет больше, чем высота страницы, то высота будет больше, чем 100%. Без неё подвал просто налезет на контент и всегда будет находиться в одном и том же месте.
К сожалению, решение не блещет красотой, но другие, на мой взгляд, ещё хуже. А вообще когда контента мало, то я просто внизу оставляю цвет фона сайта. Но заказчик иногда просит всё-таки прижать подвал к низу, и тогда я использую способ, описанный в данной статье.
