Как создать столбцы с одинаковой высотой в чистом CSS

Как заставить вашего добра дойти до конца? Как заполнить вертикальное пространство родительского div? Как получить столбцы равной длины без использования фоновых изображений?

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

Для тех, кто считает, что это дубликат, это не так. Я был вдохновлен несколькими веб-сайтами, среди которых http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks, но приведенный ниже код уникален.

ОТВЕТЫ

Ответ 1

Одна из сложных вещей в современном веб-дизайне заключается в создании двух (или более) раскладок столбцов, где все столбцы имеют равную высоту. Я отправился на поиски, чтобы найти способ сделать это в чистом CSS.

Вы можете легко выполнить это, используя фоновое изображение в wrap-div, которое содержит оба ваших столбца (или фон страницы).

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

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

== Трюк: ==

Сначала вы создаете колоды фонового дизайна, а затем добавляете полный div, который может содержать ваш обычный контент. Фокус в том, что все столбцы размещены в столбцах, создавая эффект push во всех родительских столбцах, когда контент распространяется по длине, независимо от того, какой конечный столбец является самым длинным.

В этом примере я буду использовать сетку с двумя столбцами в центрированном wrap-div с закругленными углами. Я попытался сохранить пух для облегчения копирования.

== Шаг 1 ==

Создайте свою основную веб-страницу.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>

== Шаг 2 ==

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

<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
    float:right;
    background:silver;
    width:300px;
    border: 3px dotted silver; /*temporary css*/
}
#leftsideBG{
    float:left;
    background:gold;
    width:100px;
    margin-left:-100px;
    border: 3px dotted gold; /*temporary css*/
}
</style>
</head>
<body>
<div id="rightsideBG">
    <div id="leftsideBG">
        this content obviously only fits the left column for now.
    </div>
</div>
</body>
</html>

== Шаг 3 ==

Внутри div: создайте div без фона, в котором есть все из всех столбцов. Он будет проталкивать край внутреннего div. Я добавил пунктирную границу для иллюстрации целей. Это будет холст для вашего контента.

<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
    float:right;
    background:silver;
    width:300px;
    border: 3px dotted silver; /*temporary css*/
}
#leftsideBG{
    float:left;
    background:gold;
    width:100px;
    margin-left:-100px;
    border: 3px dotted gold; /*temporary css*/
}
#overbothsides{
    float:left;
    width:400px;
    border: 3px dotted black; /*temporary css*/
}
</style>
</head>
<body>
<div id="rightsideBG">
    <div id="leftsideBG">
        <div id="overbothsides">
            this content spans over both columns now.
        </div>
    </div>
</div>
</body>
</html>

== Шаг 4 ==

Добавьте свой контент. В этом примере я помещаю два div, которые расположены над макетом. Я также убрал пунктирные границы. Престо, что он. Вы можете использовать этот код, если хотите.

<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
    float:right;
    background:silver;
    width:300px;
}
#leftsideBG{
    float:left;
    background:gold;
    width:100px;
    margin-left:-100px;
}
#overbothsides{
    float:left;
    width:400px;
}
#leftcol{
    float:left;
    width:80px;
    padding: 10px;
}
#rightcol{
    float:left;
    width:280px;
    padding: 10px;
}
</style>
</head>
<body>
<div id="rightsideBG">
    <div id="leftsideBG">
        <div id="overbothsides">
            <div id="leftcol">left column content</div>
            <div id="rightcol">right column content</div>
        </div>
    </div>
</div>
</body>
</html>

== Шаг 5 ==

Чтобы сделать его более приятным, вы можете сосредоточить весь дизайн в оберточном div и дать ему закругленные углы. Округлые углы не будут отображаться в старом IE, если вы не используете для этого специальное исправление.

<!DOCTYPE HTML>
<html>
<head>
<style>
#wrap{
    position:relative;
    width:500px;
    margin:20px auto;    
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    border-bottom-right-radius: 20px;
}
#rightsideBG{
    float:right;
    background:silver;
    width:300px;
}
#leftsideBG{
    float:left;
    background:gold;
    width:100px;
    margin-left:-100px;
}
#overbothsides{
    float:left;
    width:400px;
}
#leftcol{
    float:left;
    width:80px;
    padding: 10px;
}
#rightcol{
    float:left;
    width:280px;
    padding: 10px;
}
</style>
</head>
<body>
<div id="wrap">
    <div id="rightsideBG">
        <div id="leftsideBG">
            <div id="overbothsides">
                <div id="leftcol">left column content</div>
                <div id="rightcol">right column content</div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

== Источники вдохновения ==

Ответ 2

Для более простого решения вы можете указать родительский display: table и его дочерние элементы display: table-cell, например:

.parent {
  display: table;
}
.child {
  display: table-cell;
}

См. DEMO.

Обратите внимание, что это не работает в IE7, поэтому, если требуется поддержка IE7, потребуется более сложное решение.