Css 自动展开列

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

我尝试了很多css代码，但都不管用。 有人可以告诉我需要的CSS代码，以获得上述布局。。？？ 多谢各位

---

至少有几种方法。

---

添加一个新的div作为“left”“center”“right”的容器，隐藏溢出，并为您的3个div设置填充底部：20000px；利润底部：-20000px

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

HTML:

CSS3 您现在可以像这样使用flex box属性：

---

美好的但有一个问题。如果其中一列中的内容增加..所有列都应增加其高度。这不会发生。只需在其中一列中添加一些文本，就可以看到差异。

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

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

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