Position:absolute; - колонки равной высоты

Создавая полноценную web-страницу, все, так или иначе, сталкиваются с проблемой, а какую технику для создания оной выбрать.

Как вы могли заметить, предпочтения автора при разработке web-страницы, лежат в области создания иллюзии одинаковой высоты колонок. С помощью техники float это уже не является неосуществимым.

Другое дело, абсолютное позиционирование.

Проблемы:

footer, вернее полное его отсуствие
Фиксированная ширина макета
Только двух колоночный макет
Разметка принадлежит классу "кирпич", о чем свидетельствует отсуствие border'a охватываящего весь макет и разделительной вертикальной линии между областью контента и колонкой навигации

html-код:

<div class="middle">
  <div class="content">Content</div>
  <div class="right">Right</div>
</div>

Как видите, нет ничего лишнего, только необходимый и достаточный минимум.

Область контента, как и положено, по html-коду, впереди планеты всей, что принципе не может не радовать.

css:

* {margin:0;padding:0;}
body {background:#fff;}
.middle {
  background-color:#eee;
  border-right:#cc9 200px solid;
  margin:0 auto;position:relative;
  width:600px;
}
.right {
  position:relative;
  right:-600px;top:0;
  z-index:1;width:200px;
}
.content {
  background-color:#eee;
  border-right:#cc9 200px solid;
  position:absolute;left:0;
  top:0;width:600px;
}

Стилей тоже совсем чуть-чуть.

Слоям .middle и .content указан border, с шириной 200px. А в нем, собственно, все и дело. С его помощью мы и создаем иллюзию одинаковой высоты колонок, а также цвет фоновой заливки колонке навигации.

Слою классом content задано абсолютное позиционирование, что в конечном итоге препятствует созданию полноценного footer'a, вернее полность исключает такую возможность.

Из-за этого, кому-то это решение может показаться ущербным, но многие ресурсы, вообще, не имеют footer'a в традиционном его понимании, в тоже время имея на борту html-код и css, явно превышающий все разумные пределы при создании подобного рода разметки.

Пара примеров:

Position:absolute; - Grail

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

Скромная компенсация - без проблемная возможность сделать 100% процентную высоту web-страницы.

Примеры по html-коду и стилям достаточно прозрачны и легки в понимании и изучении.

Оставить комментарий.

Position:absolute; - колонки равной высоты

Trifler.ruХобби провинциала