Авто расширяющиеся столбцы

Question

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

Я пробовал много кода CSS, но ни один из них не работает. Может кто-то, пожалуйста, покажите мне необходимый код CSS, чтобы получить вышеуказанный макет..?? Благодарю вас.

Answer 1

Есть так много вариантов, это один из них.

http://jsfiddle.net/7cc6m/1/

HTML:

<div id="header"></div>
<div id="main">
    <div id="left" class="sidebar"></div>
    <div id="content"></div>
    <div id="right" class="sidebar"></div>
</div>
<div id="footer"></div>

CSS:

body, html {
    padding: 0;
    margin: 0;
}

body {
    height: 100%;
    width: 100%;
}

#header, #footer {
    position: absolute;
    height: 100px;
    left: 0px;
    right: 0px;
}

#footer{ bottom: 0px; }

    #left.sidebar, #content, #right.sidebar {
    position: absolute;
    top: 100px;
    bottom: 100px;
}

#left.sidebar {
    left: 0px;
    width: 200px;
}

#right.sidebar {
    right: 0px;
    width: 200px;
}

#content {
    left: 200px;
    right: 200px;
}

CSS3

Теперь вы можете использовать атрибут flex-box следующим образом: http://jsfiddle.net/7cc6m/8/

#main {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex-box;
}

.sidebar {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background: #e8e8e8;
    padding: 10px;
}

#content{
    -webkit-flex: 3;
    -ms-flex: 3;
    flex: 3;                
    background: #dedede;
    padding: 10px;
}

Answer 2

Существует как минимум несколько методов. Добавить добавить новый div в качестве контейнера для "left", "center", "right" со скрытым переполнением, и для ваших 3 div установить set padding-bottom: 20000px; поле-дно: -20000px;