Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Уроки CSS вёрстки » Прижимаем footer к низу страницы
Не нравится(-) 20 Нравится(+)
Прижимаем footer к низу страницы

В этом уроке, я расскажу Вам о том, как прижать 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. Сохраняем и смотрим, что получилось.

Вот мы и добились желаемого результата, "подвал" прижат к низу страницы.


---------------------------------------
Правила копирования материалов урока
Демо
Скачать урок (zip, 0.9 Kb)


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 34029 раз(а) и написали 19 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!