Как прижать футер сайта к низу страницы?
Беру за традицию писать статьи в первую очередь для себя, чтобы потом не датамайнить Интернет в поисках действительной информации о том, что и как делать.
Сегодняшний квест – с помощью CSS стилей создать футер сайта, который размещен в самом его низу.
Реализаций размещения футера сайта множество. Возможно, я буду находить в Интернете еще вариации реализации. Но сегодня начнем с одного из самого простого на мой взгляд способа прижать футер к низу страницы.
Структура сайта:
<html> <head> <title>Футер внизу</title> </head> <body> <div class="content">Это контент</div> <div class="footer">А футер всегда внизу</div> </body> </html>
css стиль:
html, body {height: 100%;}
.content {
height: 100%;
padding-bottom: 60px;
margin-bottom: 100px;
}
.footer {
clear: both;
height: 50px;
bottom: 0px;
position: relative;
background: #5A4CBD;
}
html
height: 100%;
body
height: 100%;
content
height: 100%; padding-bottom: 60px; margin-bottom: 100px;
footer
clear: both; height: xxx; width: yyy; bottom: 0px; position: relative; (position: fixed;\position: static;)
Ширину и высоту (ххх и ууу) – выбираем самостоятельно, также позиционирование блока на выбор.