Как прижать подвал, футер к низу страницы

2024-11-21

2
Червень
2015

16531 переглядів

Автор статті:

Віталий

Доброго времени суток. 🙂

На днях ко мне обратились с вопросом, который рано или поздно задают все начинающие верстальщики - как прижать подвал к низу страницы. Сейчас многие создают такой дизайн сайту, что прижимание не обязательно, по сути он и должен висеть в воздухе ибо так задумано, но все же при создании классического, строгого дизайна подвал хочется закрепить снизу. Так смотрится более ровно и правильно, ведь если подвал выделен своим фоном, когда он представляет из себя полосу посреди экрана, по-моему совсем не то.

Вопрос действительно популярен, но как-то я и не думал о нем писать. Информации много на эту тему и писать еще что-то, я не видел смысла. Но меня попросили, поэтому не могу отказать, возможно еще кто-то воспользуется теми способами, которые помогают мне.

Способ №1

В принципе, данный способ простенький, да как и все остальные 🙂 Его суть в том, что все блоки независимы. Шапка, контент и подвал все являются родительскими блоками и никто не вложен друг в друга.

<html>
<body>
<head></head>

<div id="header">Содержимое шапки</div>  
<div id="content">Содержимое контента</div>  
<div id="footer">Содержимое подвала</div>  

</body>
</html>

Далее задаем стили. Обязательно html,body задать высоту в 100% и определить подвалу абсолютное позиционирование. В то же время, контенту задать отступ padding равный высоте подвала, ну или немного больше. Кому-то это может показаться минусом, потому как Высота подвала должна быть определена заранее. Многих такой вариант не устроит. Для остальных, нужно добавить стили:

html,body{height: 100%}

body{
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
margin:0;
padding:0;
font:15px Tahoma;
color:#555;}

#header{
height:150px;
background:#ccc;}

#content{
padding-bottom:200px;
height:100%;}

#footer{
height:200px;
width:100%;
position:absolute;
bottom:0;
background:#333;}

Способ №2

По своей сути, способ такой же как и первый, но тут все блоки заключены в родительский контейнер.

<html>
<body>

<div class="wrapper">

	<div class="header">Содержимое шапки</div>
	<div class="content">Содержимое контента</div>
	<div class="footer">Содержимое подвала</div>

</div>

Стили будут следующими:

* {
	margin: 0;
	padding: 0;
}
html,
body {
	height: 100%;
}
.wrapper {
	position: relative;
	min-height: 100%;
}
.header {
	height: 150px;
	background:#ccc;
}
.content {
	padding-bottom: 90px;
}
.footer {
	position: absolute;
	background:#333;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 80px;
}

Есть еще много способов, но именно эти два меня всегда выручают. Все зависит от того какая структура, используется ли контейнер или нет.

На этом все, спасибо за внимание. 🙂