Нет ничего невозможного для человека, который не должен делать этого сам.
А.Х.Уэйлер

Все об эмуляции колонок равной высоты

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

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

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

В соответствующих разделах будут рассмотрены и экзотические приемы по решению эмуляции одинаковой высоты колонок.

Для начала определимся с принципами и условиями, которые станут основой нашей разметки:

  • Минимум html-кода и стилей.
  • Все колонки могут иметь индивидуальную фоновую заливку или графику, пущенную с размножением по вертикали.
  • Область контента выводится раньше колонок навигации по html-коду.
  • Область контента имеет ограничение по min/max-width.
  • Легкий переход от одного визуального представления страницы к другому - имеется в виду, расположение колонок навигации относительно области контента.
  • Возможность простыми средствами создавать страницу сто процентной высоты с включением header и footer.

Рассмотрим html-код основного блока центральной части:

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

Он остается неизменным во всех случаях для трех колоночных макетов, при двух колоночных из html-кода правая или левая колонки навигации просто удаляются, естественно все с соответствующей правкой стилей.

В общем случае мы стремимся к такому:

the best

Наличие border'а у каждой колонки не является обязательным условием. Но это дает четкое представление, как ведут себя колонки при уменьшении размеров окна браузера и при переходе с одного разрешения экрана монитора на другое, особенно это важно, если все колонки имеют плавающую ширину.

Цифры в колонках показываю последовательность расположения по html-коду.

Для создания иллюзии равной высоты колонок используется такие стилевые правила:

       margin-bottom:-32767px;padding-bottom:32766px;

Единственным не приятным моментом в этом случае является то обстоятельство, что перемещение по странице с помощью меток-якорей работает не корректно.

Другие приемы разметки без указанных выше стилей будут рассмотрены отдельно.

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