В этом уроке, я расскажу Вам о том, как прижать footer ("подвал" сайта) к низу страницы, чтобы при малом количестве контента не терялась целостность страницы.
1. Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2. Вставьте в этот файл следующий код.
html, body {
margin: 0;
padding: 0;
height: 100%; /* не забываем это свойство для html и body */
}
#conteiner {
position: relative;
min-height: 100%; /* минимальная высота контейнера, ее понимают все браузеры за исключением IE6 */
}
/* ниже фильтр * html так называемый CSS хак, через который можно задать любое свойство предназначенное для IE6 */
* html #conteiner {
height: 100%;
}
#header {
position: relative;
height: 2.5em;
}
/* элемент ниже позволяет не наезжать подвалу на контент, он должен быть не меньше подвала по высоте */
.end_content {
position: relative;
height: 2.6em;
}
#footer {
background-color:#1C7FFF;
color:#FFF;
position: relative;
margin-top: -2.5em; /* свойство должно быть равным высоте элемента, не забываем про отрицательное значение */
height: 2.5em;
}
3. Чтобы увидеть работу стилей, создадим в той же директории html файл и, например вставим туда такой код:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="conteiner">
<!-- Обращаю Ваше внимание на то что Header (шапка) внутри контейнера -->
<div id="header">title</div>
content
<div class="end_content"></div>
</div>
<!-- footer (подвал) за контейнером -->
<div id="footer">footer</div>
</body>
</html>
4. Сохраняем и смотрим, что получилось.
Вот мы и добились желаемого результата, "подвал" прижат к низу страницы.
ДемоПо материалам сайта:
Российская школа CSS
