【问题标题】：Auto expanding columns自动扩展列
【发布时间】：2013-07-28 06:21:50
【问题描述】：

我在标题下方有 3 列。它们是左侧栏、内容和右侧栏。我希望柱的高度根据最高柱的高度增加。例如，如果其中一列的高度为 400 像素，我希望其余两列具有相同的高度。

我尝试了很多 css 代码，但它们都不起作用。有人可以告诉我获得上述布局所需的 CSS 代码吗？？谢谢。

【问题讨论】：

标签： css layout css-position column-width

【解决方案1】：

至少有几种方法。添加一个新的 div 作为 "left" "center" "right" 的容器并隐藏溢出，并为你的 3 个 div 设置 padding-bottom: 20000px;边距底部：-20000px;

【讨论】：

【解决方案2】：

有很多选择，这是其中之一。

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;
}

【讨论】：

很好..但是有一个问题。如果其中一列中的内容增加..所有列都应该增加它们的高度。这不会发生。只需在其中一列中添加一些文本，然后查看差异。