Все о HTML и CSS

Здесь вы найдете много полезной информации о том как построить собственный сайт, как правильно верстать Web страницы, а также освоите множество приемов и трюков которые можно выполнить при помощи CSS, без использования Java-скриптов. Данный сайт будет полезен как новичку, так и опытному Web Мастеру.

Приветствую Вас Гость | Регистрация | Вход
МЕНЮ
КАЛЕНДАРЬ
«  Март 2009  »
ПнВтСрЧтПтСбВс
      1
2345678
9101112131415
16171819202122
23242526272829
3031
КАТЕГОРИИ УРОКОВ
HTML [8]
Тут уроки только по HTML
CSS [15]
Уроки только по CSS
Верстка дизайнов [0]
Верстка собственных дизайнов
Статьи [9]
Статьи о веб дизайне и не только
Скрипты [82]
Скрипты CSS
Делаем высоту 100%, прибиваем подвал к низу страницы.
В этом уроке, я расскажу Вам о том, как прижать footer ("подвал" сайта) к низу страницы, чтобы при малом количестве контента не терялась целостность страницы.
В ваш файл CSS добавляем следующее (файл должен называться style.css):
Code

html, body {
  margin: 0;
  padding: 0;
  height: 100%; /* не забываем это свойство для html и body */
}

Если вам нужно прижать подвал на какой то конкретной странице, то напишите следующий код прямо на странице:
Code

<style>
html, body {
  margin: 0;
  padding: 0;
  height: 100%; /* не забываем это свойство для html и body */
}
</style>

Чтобы увидеть работу стилей, создадим в той же директории html файл и, например вставим туда такой код:

Code

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
  <div id="conteiner">
  <div id="header">title</div>
  content
  <div class="end_content"></div>
  </div>
  <!-- footer (подвал) за контейнером -->
  <div id="footer">footer</div>
</body>
</html>

Сохраняем и любуемся результатом.

Категория: CSS | Просмотров: 1184 | Добавил: Red_Line666x | 14:56 | Рейтинг: 0.0/0 |
Всего комментариев: 1
1 FedAladaloolf  
0
то что я искал, спасибо

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
© 2008-2024 Школа HTML и CSS. Все права защищены.
При копировании материалов с данного сайта, гиперссылка на //school-html-css.3dn.ru/ ОБЯЗАТЕЛЬНА! Вся информация защищена законами о защите авторских правах.
Полную информацию о копировании материалов читайте в разделе "Правила копирования информации"