Матвей Земсков

Заметки веб-мастера

Пятница, 03 июля 2009 00:23

Создание верстки тянущейся по высоте на 100%.

Оцените материал
(0 голосов)

Задача: создать блочную верстку макета чтобы при любом количестве текста подвал всегда был внизу окна браузера.

Сначала создадим структуру страницы по следующей схеме:

Схема html-макета для верски

Очень ВАЖНО, чтобы элементы верстки имели такую же иерархию как на схеме, особенно это касается элемента div#footer. Он не должен входить в div#wrapper, который является «оберткой» заголовка и содержимого.

И приступим к написанию css правил. Сначала присвоим элементам html и body высоту 100%:

CSS

html{
  height:100%;
 }
body{
  font-family:Verdana, Arial, Helvetica, sans-serif;	
  text-align:center;/*центрирование IE6*/
  height:100%;
 }

Затем присвоим следующие правила элементу #wrapper, который является «оберткой» заголовка и содержимого:

CSS

#wrapper{
  min-width:990px;
  max-width:1280px;
  margin-left:auto;/*центрируем для остальных*/
  margin-right:auto;/*центрируем для остальных*/
  text-align:left;/*отменяем центрирование ie6*/
  border:1px solid #999;
  min-height:100%;
  height:auto !important;/*ie6*/
  height:100%;/*ie6*/
  }
  

Присвоим элементу div#wrapper минимальную высоту в 100%. Таким образом мы растянули 3 элемента по высоте (html, body, wrapper). Так как ie6 не поддерживает свойство min-height, для него пишем следующие правила, которые заменят ему min-height.

CSS

   height:auto !important;/*ie6*/
   height:100%;/*ie6*/ 
   

Значение высоты в ie6 у элемента div#wrapper будет 100%, а в остальных браузерах оно будет равно auto, так как ie6. не поддерживает «!important». Таким образом мы обошли непонимание min-height в ie6.

Так как элемент div#footer (подвал) не входит в «обертку»( div#wrapper) и находится под ним – «обертка» как-бы «давит» на него и он оказывается в самом низу окна браузера.

Правда под ним появляется расстояние до нижней границы окна. Это расстояние равно высоте элемента div#footer. Поэтому для того, чтобы ее убрать мы прописываем следующие правила этому элементу:

CSS

#footer{
   height:76px;
   background:url(images/foot_back.png) repeat-x left top;
   margin-top:-76px;
   text-align:left;
}

В первую очередь указываем его высоту (height:76px;), а затем «поднимаем» его относительно себя на значение его высоту (margin-top:-76px;). Таким образом расстояние, которое было после «подвала» исчезает.

Хотелось бы подчеркнуть еще один момент – если текста в блоке с основным содержимым много, то этот текст наложится на наш «подвал», чтобы избежать этого нужно добавить к блоку с текстом основного содержимого (div#content) внутренний отступ снизу (свойство padding-bottom), значение которого будет больше значения высоты «подвала». Например, вот так:

CSS

#content{
  padding:1em;
  padding-bottom:80px;
 }
 

Есть еще один альтернативныый вариант избежать наложения текста из блока с основным содержимым на «подвал». Нужно в блок с основным содержимым добавить пустой элемент <div> с высотой отступа от «подвала».

В итоге мы имеем страничку, «подвал» на которой всегда будет находиться внизу, независимо от количества текста в блоке с основным содержимым.

Создание верстки тянущейся по высоте на 100%. Второй способ.

Существует еще один способ размещения «подвала» внизу окна браузера независимо от количества контента на странице. Структура html документа должна быть такой, как показано на схеме выше. Имеется ввиду тот момент, что подвал не должен входить в «обертку». Этот способ основан на абсолютном позиционировании элемента «подвала» (div#footer). Позиционировать его мы будем относительно элемента body документа.

Итак начнем сначала. Вот стили для body и html элементов.

CSS

html{
   height:100%;
 }
 body{
  font-family:Verdana, Arial, Helvetica, sans-serif;
  text-align:center;/*центрирование IE6*/
  min-height:100%;
  height:auto !important;
  height:100%;
  position:relative;
 }

Стили элемента html не изменились, а вот со стилями элемента body произошли значительные изменения.

Мы убрали у элемента div#wrapper («обертка») свойства устанавливающие высоту и применили их к body.

CSS

#wrap{
  min-width:990px;
  max-width:1280px;
  text-align:left;/*отменяем центрирование ie6*/
  border:1px solid #999;
  border-bottom:none; 
 }

Также добавили свойство position:relative; для того чтобы «подвал», который будет позиционирован абсолютно, отсчитывал свое положение от элемента body.

CSS

#footer{
   position:absolute;
   bottom:0;
   height:76px;
   background:url(images/foot_back.png) repeat-x left top;
   /*margin-top:-76px;*/
   text-align:left;
   width:100%;
   }

У «подвала» стили также поменялись. Сначала применили к элементу div#footer абсолютное позиционирование (position:absolute; bottom:0;). Таким образом «прибили» его к низу окна. В этот момент ширина «подвала» уменьшилась до ширины его содержимого.

Прочитано 4025 раз

Добавить комментарий


Защитный код
Обновить

Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: