Как прижать футер сайта к низу страницы?

Беру за традицию писать статьи в первую очередь для себя, чтобы потом не датамайнить Интернет в поисках действительной информации о том, что и как делать.

Сегодняшний квест — с помощью 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]


Ширину и высоту (ххх и ууу) — выбираем самостоятельно, также позиционирование блока на выбор.

Понравилась статья? - поделись с друзьями!

Категория: ВебДев