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

Небольшой урок за основу которого я взял урок от GZ Design Урок CSS вёрстки 3. Простой шаблон сайта. Я хочу показать как добиться той самой табличной тянучисти к которой все так привыкли. Если Вы присмотритесь к демо версии, то обнаружите небольшой недостаток самой блочной верстки, казалось бы не возможно растянуть левый и правый блок по всей высоте от шапки сайта до подвала, как это можно сделать таблицами. Однако выход всегда есть.

css

/*
=============================================================
© 2008 Российская школа CSS (Russian CSS School)
http://www.css-school.ru
Урок CSS вёрстки №3 Простой шаблон сайта
style.css - Набор стилей для урока
=============================================================
*/

/* Задание стилей всего шаблона */
body {
font: 80% Arial;
text-align:center;
}

/* Задание стилей новой строки */
p {margin:0 10px 10px;}

/* Задание стилей ссылок */
a {
padding:5px;
text-decoration:none;
color:#0053a1;
}

/* Задание стилей ссылок при наведении */
a:hover {
text-decoration:underline;
color:#067a00;
}

/* Задание стилей блока заголовка */
div#header {
background-color:#005387;
color:#fff;
height:80px;
line-height:80px;
padding-left:20px;
}

/* Задание стилей всего шаблона */
div#all {
text-align:left;
width:750px;
margin:0 auto;
}

/* Задание стилей навигации */
div#navigation {
background:#e3f4ff;
float:left;
width:150px;
margin-left:-750px;
}

/* Задание стилей списка */
div#navigation ul {
margin:15px 0;
padding:0;
list-style-type:none;
}

/* Задание стилей элемента списка */
div#navigation li{margin-bottom:5px;}

/* Задание стилей правого столбца */
div#extra {
background:#c1e7ff;
float:left;
width:150px;
margin-left:-150px;

}

/* Задание стилей "подвала" */
div#footer {
background-color:#013657;
color:#fff;
clear:left;
height:25px;
}

div#footer p {
margin:0;
padding:5px 10px;
}

/* Задание стилей всего шаблона */
div#templ {
float:left;
width:100%;
}

/* Задание стилей центрального столбца */
div#content {margin: 0 150px;}


html



Российская школа CSS. Учебный шаблон 1



<div id="all">
<div id="header"><h1>Учебный шаблон №1</h1></div>
  <div id="templ">
    <div id="content">
      <p><strong>Основное содержание</strong></p>
<p>Какой-то текст</p>
    </div>
  </div>
  <div id="navigation">

    <p><strong>Навигация</strong></p>
    <ul>
      <li>&#8594; [url=http://www.css-school.ru/]</li>
      <li>&#8594; <a href="#">Ссылка 1[/url]</li>
      <li>&#8594; [url=#">Ссылка 2</a></li>
      <li>&#8594; <a href=]Ссылка 3[/url]</li>
      <li>&#8594; [url=#">Ссылка 4</a></li>
      <li>&#8594; <a href=]Ссылка 5[/url]</li>
    </ul>
  </div>
  <div id="extra">
    <p><strong>Дополнительно</strong></p>
    <p>Различные полезные блоки, реклама и т.д.</p>
  </div>
  <div id="footer">
    <p>© Copyright</p>
  </div>
</div>




Для начала выкинем подвал сайта из общего блока "all" в противном случае могут всплыть баги в FF

CSS

div#footer {
background-color: #013657;
color: #fff;
clear: left;
height: 25px;
text-align: left; /* добавлено от блока "all" */
width: 750px; /* добавлено от блока "all" */
margin: 0 auto; /* добавлено от блока "all" */
}


HTML

  </div>
</div>
<div id="footer">
  <p>© Copyright</p>
</div>




Далее добавляем для двух блоков navigation и extra следующие свойства: margin-bottom: -1000em; - оттягивает блок вниз padding-bottom: 1000em; - не позволяет блоку провалиться при заполнением контента.

CSS

div#navigation {
background:#e3f4ff;
float:left;
width:150px;
margin-left:-750px;
margin-bottom: -1000em;
padding-bottom: 1000em;
}
div#extra {
background:#c1e7ff;
float:left;
width:150px;
margin-left:-150px;
margin-bottom: -1000em;
padding-bottom: 1000em;
}


У нас получается растянуть блоки на произвольную цифру 1000em можете указать и 5000em и 1000000px - это уже личное. Но у нас возникает проблема, что окно браузера растянулось. Для этого просто нашему блоку "all" пишем свойство overflow: hidden; - оно позволяет скрыть все лишнее.

CSS

div#all {
text-align:left;
width:750px;
margin:0 auto;
overflow: hidden;
}


Проблема решена, хоть и настолько радикальным способом. Приятного юзанья кода!


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



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

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

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

Исо 9001 оформление сертификата соответствия iso 9001.

«    Октябрь 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
31
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!