CSS - столбцы одинаковой высоты?

В CSS я могу сделать что-то вроде этого:

Но я понятия не имею, как изменить это на что-то вроде:

Возможно ли это с помощью CSS?

Если да, то как я могу сделать это без явного указания высоты (пусть контент растет)?

Источник

10 ответов

Решение

Flexbox

Если вы читаете это в конце 2013 года, в вашем распоряжении есть flexbox. Предполагая этот макет:

<div class="row">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

В flexbox столбцы одинаковой высоты - это всего лишь одно объявление:

.row {
    display: flex; /* equal height of the children */
}

.col {
    flex: 1; /* additionally, equal width */
}

Поддержка браузера: http://caniuse.com/flexbox; демо: http://jsfiddle.net/7L7rS/

Макет таблицы

Если вам все еще нужно поддерживать IE 8 или 9, то вам нужно использовать макет таблицы:

.row {
    display: table;
}

.col {
    display: table-cell;
    width: 33.33%; /* depends on the number of columns */
}

Демо: http://jsfiddle.net/UT7ZD/

Источник

Дать overflow: hidden к контейнеру и большим (и равным) отрицательным полям и положительным отступам к столбцам. Обратите внимание, что у этого метода есть некоторые проблемы, например, якорные ссылки не будут работать в вашем макете.

наценка

<div class="container">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>

CSS

.container {
    overflow: hidden;
}

.column {
    float: left;    
    margin-bottom: -10000px;
    padding-bottom: 10000px;
}

Результат

CSS равные высоты столбцов

Источник

Да.

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

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}

Это не единственный метод для этого, но это, вероятно, самый элегантный метод, с которым я столкнулся.

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

Источник

Вы можете сделать это легко с помощью следующего JavaScript:

$(window).load(function() {
    var els = $('div.left, div.middle, div.right');
    els.height(getTallestHeight(els));
}); 

function getTallestHeight(elements) {
    var tallest = 0, height;

    for(i; i < elements.length; i++) {
        height = $(elements[i]).height();

        if(height > tallest) 
            tallest = height;
    }

    return tallest;
};
Источник

Вы можете использовать таблицы CSS, например, так:

<style type='text/css">
    .container { display: table; }
    .container .row { display: table-row; }
    .container .row .panel { display: table-cell; }
</style>
<div class="container">
    <div class="row">
        <div class="panel">...text...</div>
        <div class="panel">...text...</div>
        <div class="panel">...text...</div>
    </div>
</div>
Источник

Современный способ сделать это: CSS Grid.

HTML:

<div class="container">
  <div class="element">{...}</div>
  <div class="element">{...}</div>
  <div class="element">{...}</div>
</div>

CSS:

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.element {
  border: 2px solid #000;
}

Живой пример здесь.

repeat(auto-fit, minmax(200px, 1fr)); Часть устанавливает ширину столбцов. Каждый столбец занимает 1 часть доступного пространства, но не может занимать менее 200 пикселей. Вместо того, чтобы сжиматься ниже 200px, он оборачивается ниже, поэтому он даже отзывчив. Вы также можете иметь любое количество столбцов, а не только 3. Они все будут хорошо вписываться.

Если вам нужно ровно 3 столбца, используйте grid-template-columns: repeat(3, 1fr); вместо. У вас все еще может быть больше элементов, они будут обернуты, будут отзывчивыми, но всегда будут размещены в 3 колонках

Подробнее о CSS Grid на MDN или CSS-трюках.

Это чистый, читаемый, обслуживаемый, гибкий, а также простой в использовании!

Источник

Другой вариант - использовать фреймворк, который решил эту проблему. Bootstrap в настоящее время не имеет опции одинаковой высоты, но Foundation by Zurb имеет, и вы можете увидеть, как она работает здесь: http://foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html

Вот пример того, как вы бы это использовали:

<div class="row" data-equalizer>
    <div class="large-6 columns panel" data-equalizer-watch>
    </div>
    <div class="large-6 columns panel" data-equalizer-watch>
    </div>
</div>

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

Итак, если вы хотите просто CSS, это добавит больше кода, но если вы уже используете фреймворк, то они уже решили это.

Удачного кодирования.

Источник

Вы можете попробовать... это работает для меня и всех браузеров, совместимых...

<div id="main" style="width:800px; display:table">
<div id="left" style="width:300px; border:1px solid #666; display:table-cell;"></div>
<div id="right" style="width:500px; border:1px solid #666; display:table-cell;"></div>
</div>
Источник

Используйте Flexbox для создания столбцов одинаковой высоты

* {box-sizing: border-box;}

/* Style Row */
.row {
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  display: flex;
  flex-wrap: wrap;
}

/* Make the columns stack on top of each other */
.row > .column {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

/* When Screen width is 400px or more make the columns stack next to each other*/
@media screen and (min-width: 400px) {
  .row > .column {    
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}
<div class="row">
  <!-- First Column -->
  <div class="column" style="background-color: #dc3545;">
    <h2>Column 1</h2>
    <p>Some Text...</p>
    <p>Some Text...</p>
  </div>
  <!-- Second Column -->
  <div class="column" style="background-color: #ffc107;">
    <h2>Column 2</h2>
    <p>Some Text...</p>
    <p>Some Text...</p>
    <p>Some Text...</p>    
    <p>Some Text...</p>
    <p>Some Text...</p>
    <p>Some Text...</p>
    <p>Some Text...</p>
  </div>
  <!-- Third Column -->
  <div class="column" style="background-color: #007eff;">
    <h2>Column 3</h2>
    <p>Some Text...</p>
    <p>Some Text...</p>
    <p>Some Text...</p>    
  </div>
</div>

Источник

Отзывчивый ответ:

CSS flexbox - это мило, но отключение пользователей IE9 сегодня немного безумно. По состоянию на 1 августа 2015 года:

3% IE9
2% IE8

Вырезать это показывает 5% сломанной страницы? Псих.

Использование медиазапроса, как Bootstrap, возвращает к IE8, как это делает display: table/table-cell, Так:

http://jsfiddle.net/b9chris/bu6Lejw6/

HTML

<div class=box>
    <div class="col col1">Col 1<br/>Col 1</div>
    <div class="col col2">Col 2</div>
</div>

CSS

body {
    font: 10pt Verdana;
    padding: 0;
    margin: 0;
}

div.col {
    padding: 10px;
}

div.col1 {
    background: #8ff;
}
div.col2 {
    background: #8f8;
}

@media (min-width: 400px) {
    div.box {
        display: table;
        width: 100%;
    }
    div.col {
        display: table-cell;
        width: 50%;
    }
}

В этом случае я использовал 400px в качестве переключателя между столбцами и вертикальной разметкой, потому что тренд панелей jsfiddle довольно маленький. Помешайте размеру этого окна, и вы увидите, что столбцы красиво переставляются, включая растяжение на полную высоту, когда они должны быть столбцами, чтобы их фоновые цвета не обрезались на полпути вниз по странице. Никаких сумасшедших взломов padding/margin, которые врезаются в более поздние тэги на странице, и не выбрасывание 5% ваших посетителей волкам.

Источник

Вот пример, который я только что написал в SASS с изменяемым промежутком между столбцами и количеством столбцов (переменными):

CSS:

.fauxer * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.fauxer {
  overflow: hidden; }

.fauxer > div {
  display: table;
  border-spacing: 20px;
  margin: -20px auto -20px -20px;
  width: -webkit-calc(100% + 40px);
  width: -moz-calc(100% + 40px);
  width: calc(100% + 40px); }

.fauxer > div > div {
  display: table-row; }

.fauxer > div > div > div {
  display: table-cell;
  width: 20%;
  padding: 20px;
  border: thin solid #000; }
<div class="fauxer">
                <div>
                    <div>
                        <div>
                            Lorem column 1
                        </div>
                        <div>
                            Lorem ipsum column 2 dolor sit amet, consetetur sadipscing elitr, 
                            sed diam nonumy eirmod tempor invidunt ut labore et 
                            dolore magna aliquyam erat, sed diam voluptua.
                        </div>
                        <div>
                            Lorem column 3
                        </div>
                        <div>
                            Lorem column 4
                        </div>
                        <div>
                            Lorem column 5
                        </div>
                    </div>
                </div>
            </div>

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

Редактируемый пример в SCSS вы можете получить здесь: JSfiddle

Источник
Другие вопросы по тегам