自动扩展列

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作为“左”“中”“右”的容器，隐藏溢出，并为你的3个div设置padding-bottom：20000px; margin-bottom：-20000px;