Брось везунчика в воду, и он выплывет с рыбой в зубах.
Юлиан Тувим

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

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

Если не принимать во внимание использование графики, а обходиться только 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;

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

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


Оставьте комментарий к этому документу:
Правила комментирования:



cod


Все поля обязательны для заполнения!
  1. Все поля формы обязательны для заполнения.
  2. При этом Ваш e-mail не публикуется.
  3. Содержание комментариев, оставленных на опубликованные материалы, является мнением лиц, их написавших, и не обязано совпадать с мнением Администратора, никоим образом не ответственного за выводы и умозаключения, могущие возникнуть при прочтении комментариев, а также любые версии их истолкования.
  4. Не будут опубликованы комментарии:
    1. нарушающие положения законодательства РФ.
    2. содержащие оскорбления любого вида
      (личного, религиозного, национального...);
    3. включающие неуместные теме поста ссылки, в том числе спамовые;
    4. содержащие рекламу любых товаров и услуг, иных ресурсов, СМИ или событий, не относящихся к контексту обсуждения статьи.
    5. не относящиеся к теме статьи или к контексту обсуждения.
  5. Факт оформления Вами комментария является безоговорочным принятием этих условий.
Вернуться к документу.