css - 自动扩展列

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 设置 padding-bottom: 20000px; 边距底部：-20000px；