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