Css блоки одинаковой высоты

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

Одна из таких — используя только обожаемую заказчиком DIV-ную вёрстку и вообще не привлекая JavaScript, дать колонкам сайта автоматическое выравнивание высоты по наиболее заполненной колонке, подобно тому как это происходило бы в нелюбимой табличной вёрстке.

Ниже предлагаю элементарное решение на основе всего двух объявлений в стилях сайта и одного обёрточного контейнера в теле страницы. Решение валидно для множества браузеров, кроме IE6-IE7, и при удалении одного свойства из стилей, привнесённых этим решением, может быть преобразовано под браузеры без поддержки CSS3.

Объяснение решения

Предположим, есть следующая разметка: шапка, три колонки (левая, центральная, правая) и подвал страницы.

Первым делом оборачиваем будущие колонки в DIV-контейнер. Например, назначим ему идентификатор columns .

Осталось прописать в стили сайта следующее:

Здесь мы указали браузеру, что требуем обёрточный контейнер показывать как блочную таблицу на всю ширину родителя, причём для исключения непредвиденных искажений размеры таблицы просим рассматривать по её границам (плюс неучитываемые margin -отступы с боков погашаем намеренно, иначе размер исказится). А вложенные в эту обёртку первородные DIV-ы призываем показывать как ячейки таблицы с подстраиваемой шириной (подстройку высоты браузер делает сам) и таким же рассмотрением размеров ячеек по их границам, а не по границам содержащегося в них контента.

В CSS2 не поддерживается свойство box-sizing , поэтому для старых браузеров, в случае необходимости указать размеры ячеек, делать это нужно за вычетом значений border – и padding -отступов.

Теперь если бы мы, например, захотели боковые колонки сделать фиксированного размера, то в стилях просто нужно прописать желаемые ограничительные размеры колонок. Допустим, желаем левую колонку — 300 пикселей, а правую — 200 пикселей и вдобавок с отсечением невольно выступивших за край частей её содержимого.

Такое указание родства объектов, как использовано в продемонстрированном примере, необходимо для гарантии срабатывания стилевых правил лишь на конкретные колонки, принадлежащие непосредственно обёртке. А добавочное причисление случая с тегом noindex служит цели отработать ситуацию, когда СЕОшник сайта решил отдельную колонку закрыть от индексирования поисковыми серверами (нынче в строении интернет-магазинов это бывает принципиальной деталью).

Читайте также:  Spaces зона spaces зона знакомства

В этом уроке я приведу различные способы, показывающие как можно сделать колонки одинаковой высоты. Все варианты будут разобраны для двухколоночного макета страницы, но они также будут работать для трёх и более колонок (с небольшой модификацией). Часть примеров реализуется на чистом CSS, другие используют JavaScript. Вы можете посмотреть каждый пример в редакторе Codepen, кликнув по картинке.

1. Псевдоэлемент и абсолютное позиционирование

Суть данного способа следующая: с помощью псевдокласса :after каждой колонке добавляется блок, который залит соответствующим цветом и имеет высоту, равную 100% высоте блока-контейнера. Для блока-контейнера задано свойство overflow: hidden; , которое и обрезает лишнюю высоту.

В медиазапросе, например, для максимальной ширины 860px отменим обрезку содержимого контейнера, обтекание для колонок и скроем содержимое, добавленное с помощью псевдокласса. Ширину колонок сделаем равную ширине блока-контейнера.

2. Внутренние и внешние отступы

Для каждой колонки устанавливаем нижнее поле padding с большим значением. В этом случае фон колонки будет распространяться на всю высоту поля. Далее задаём отрицательное нижнее поле с таким же значением. С его помощью мы уменьшаем высоту колонки до её фактических размеров, не затрагивая фоновую заливку. Свойство overflow: hidden; , заданное для блока-контейнера, обрезает высоту каждой колонки, ориентируясь на самую высокую.

В медиазапросе уберём нижние поля и отступы, отменим обрезку содержимого и установим ширину колонок, равную ширине блока-контейнера.

3. По типу таблицы

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

С помощью медиазапроса сделаем все элементы блочными и установим для боковой колонки ширину 100%.

4. Flexbox

В Flexbox-модели каждый дочерний элемент выстраивается в ряд (вдоль главной оси) колонками одинаковой высоты, равной высоте блока-контейнера. Зафиксируем ширину боковой колонки с помощью flex-basis: 300px; и добавим ей значение flex-shrink: 0; , которое предотвратит сужение.

Укажем медиазапрос, в котором флекс-модель будет применяться к элементам для ширины области просмотра от 860px .

5. Плагин matchHeight

Самый простой способ, который будет работать во всех современных браузерах и IE8+. Скачать плагин можно со страницы разработчика. Эта библиотека позволяет устанавливать одинаковую высоту как в одном ряду, так и во всех рядах одновременно. Для всех колонок задаём одинаковый класс (в данном примере item ), который будет использоваться при активации плагина:

С помощью медиазапроса отменим обтекание колонок и укажем определение высоты колонок в зависимости от высоты их содержимого.

6. jQuery функция css()

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

Читайте также:  Стиральная машина под раковиной в ванной отзывы

С помощью медиазапроса отменим обтекание колонок и укажем определение минимальной высоты колонок в зависимости от высоты их содержимого.

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

Посмотреть примерСкачать

Речь в данной статьей пойдет о свойстве flex . О нём я уже писал в данной статье — Вторая часть секретных свойств CSS3.

Разметка страницы

HTML часть

Определим две колонки, которые в дальнейшем будем делать одинаковой высоты с помощью CSS:

То есть нам необходимо сделать так, чтобы блок

Колонки одинаковой высоты

CSS часть

Определим flexbox для основного контейнера, в котором находятся два блока:

Сейчас мы преобразовали блок с идентификатором page во flex-контейнер. На данный момент он занимает всю ширину страницы.

Но давайте сделаем для него максимальную ширину 1200px и выровняем по центру:

Отлично! Сейчас осталось задать ширину для центрального блока с основным контентом и для сайдбара:

  • flex-grow — на сколько один отдельный блок может быть больше соседних элементов.
  • flex-shrink — определяет возможность сжиматься при необходимости.

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

Здесь приведен код без префиксов для того, чтобы он не занимал много места и не смотрелся громоздко. Вы можете полностью рабочий пример с помощью кнопки в начале статьи.

Также нужно сказать о том, где работает данный метод. Так как это свойство достаточно новое, то и работает оно в современных браузерах Firefox, Chrome, Safari, Opera и IE 11.

Вывод

Из данной статьи вы узнали как сделать колонки одинаковой высоты на CSS. Но это далеко не все возможности этого CSS свойства. Свойство flex позволяет делать блоки резиновыми, выстраивать элементы автоматически в несколько столбцов или строк, занимая всю свободную область, а также многое другое.

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

Успехов!

Еще материалы по этой теме

Отправить статью

Сохраните ссылку на статью, чтобы прочитать позже. Отправить ссылку на материал в:

Читайте также:  Максимальная температура электрической плиты

Введите Email ниже:

Ссылка на статью отправлена вам на Email.

7 комментариев к записи

😎 Потрясающее решение двух колонок одинаковой высоты! Альтернативы нет!
Другие решения — либо «обманки», вроде border шириной в aside. Более-менее неплохое решение — придание глобальному контейнеру свойства таблицы (display: table;), а aside и main — свойств ячейки (display: table-cell;). Но и это решение — не то, не очень… А здесь — просто восторг!
Решение простое, изящное, легко подстраивается под себя. Мало того, включает и вариант для мобилок.
Хотя не вполне понятно самое последнее правило:

@media all and (max-width: 700px) <
.
#main < padding-right:40px; >
>

— здесь не видно этого зазора в 40px.

Спасибо большое, беру на вооружение.

А вот интересно, насколько будет правильно прикрутить заголовок и подвал вне контейнера page? Например, сделать глобальный контейнер

#global <
margin: 0 auto;
max-width: 1300px; >

а в него хэдер, затем section >

Благодарю, добрый человек — пригодилось!

Замечательное решение, спасибо автору! Иначе пришлось бы городить отдельный макет для мобилок.

Но у него есть пара проблемочек — решить их можно, но придётся попыхтеть.

1. Когда aside и page выстраиваются лентой, и если в aside много чего наложено, например, меню на много пунктов, на смартфоне меню приходится долго-долго мотать чтоб добраться до статьи. Эффект "тускнеет".

ИМХО, для избавления от этой перемотки, есть 2 решения:

а) В меню давать ссылки не просто на статьи, а ссылки на якорь в начале статьи. Например,

И тогда при нажатии кнопки меню юзер перескочит сразу в начало статьи, а не страницы. А меню останется сверху.

б) Попробовать меню аккордеон — меню будет спрятано в кнопку рубрики — клик и рубрика раскрыла меню рубрики. Такой вариант вполне пригоден для смартофонов. А для десктопов сжимать "гармонь" как-то ну очень необязательно. Есть ли тут универсальное решение, не знаю.

2. Вторая проблема — оказалось, не так просто подобрать ширину, при которой aside и page выстраиваются лентой:

Под мой Note4 я указал 600рх и при портретном смартфоне — всё лентой и хорошо. А вот при ландшафте >600рх есть неприятный эффект: aside с аккордеоном становятся как заказано — 280px, а поле для статьи — маловато. И получается рядом с меню пустое место. Как победить это, ума не приложу!

Хотя, сейчас поэкспериментировал: оказывается, в разных мобильных браузерах всё это по-разному! ёклмн!

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock detector