Лого SiteHere.ru

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

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

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

Рекомендую также:

Живая демонстрация:

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

А вот скриншот:

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

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

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

HTML часть

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

HTML КОД
1
2
3
4
5
6
7
8
<section id="page">
    <div id="main">
        <!-- Часть с контентом -->
    </div>
    <aside>
        <!-- Сайдбар -->
    </aside>
</section>

То есть нам необходимо сделать так, чтобы блок <div> с идентификатором main и блок <aside> имели одинаковую высоту, независимо от содержания внутри любого. Но это еще не всё что нужно сделать. На маленьких экранах боковая сторона должна размещаться под блоком с основным содержимым. Это сделаем для удобства просмотра на мобильных устройствах.

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

CSS часть

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

CSS КОД
1
2
3
#page {
    display:flex;
}

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

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

CSS КОД
1
2
3
4
5
6
7
#page {
    display:flex;
 
    /* Выравнивание по центру */
    max-width:1200px;
    margin:0 auto;
}

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

CSS КОД
1
2
3
4
5
6
7
8
9
10
#main {
    /* Это свойство позволяет данному блоку растягиваться и занимать всё доступное пространство, не затрагивая сайдбар */
    flex-grow:1;
}
 
aside {
    /* Здесь задаем ширину сайдбара по умолчанию и не даем ему сужаться*/
    flex-shrink:0;
    width:280px;
}

Пояснения:

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

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

CSS КОД
1
2
3
4
5
6
7
8
9
10
@media all and (max-width: 800px) {
    #page {
        flex-flow:column;
    }
 
    /* Делаем сайдбар на всю ширину экрана */
    aside {
        width:auto;
    }
}

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

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

Вывод

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

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

Успехов!

Источник: Оригинал

С Уважением, Юрий Немец

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 id="page&#34, наконец, подвал…

     
  • Алексей

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

     
  • Ксаныч

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

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

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

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

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

    <a href="article1#pagetop>Статья 1</a>

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

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

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

    @media all and (max-width: 800px)

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

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

    Может, кто предложит решение?

     
    • Юрий Немец

      Спасибо, за дополнение 🙂 .

       
  • Ксаныч

    Решил закавыку просто: указал ширину «схлопывания» макета 700рх (вместо 600) — при такой ширинн и ландшафт на смартфоне — лентой. Зато без тесноты и ничто не выпячивается.

     
  • Haker

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

     
  • Ильдар

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

    Весь интернет перерыл в поисках хороших вариантов, остановился на этом

     

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

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