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

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

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


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

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

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