3列布局需要高度相等[重复]答案

【问题标题】：3 columns layout need to be equal in height [duplicate]3列布局需要高度相等[重复]
【发布时间】：2014-02-20 02:28:52
【问题描述】：

我想使用一个简单的布局，侧边栏，副边栏和主要内容，所有列的高度需要相同。这是我遇到问题的时候，如果它们是空的，列需要是最小屏幕高度，如果 1 列具有元素/内容，则其他列需要具有相同的高度。

// 想法

<div id="container">

    needs to be min-heigth 100%

    <div id="sidebar">

        needs to be 40px width

    </div>
    <div id="subsidebar">

        needs to be 200px width

    </div>
    <div id="content">

        needs to be 100% width
        <div class="some-element-is-3000">
            3000px height(example)
        </div>
    </div>
</div>

【问题讨论】：

不，这不一样，我正在寻找一个没有固定高度的布局。布局必须至少为 100% 的屏幕高度。

标签： html css layout

【解决方案1】：

试试下面的小提琴。它使用display:table;和display:table-cell;：

CSS

html,body,#container{
    width:100%;
    height:100%;
}
#container{
    display:table;
}
#sidebar,#subsidebar,#content{
    border:1px solid black;
    display:table-cell;
}
#sidebar{
    min-width:40px;
}
#subsidebar{
    min-width:200px;
}
#content{
    width:100%;
}

摆弄所有三个内容较少的 div Fiddle
调整内容 div 超出窗口高度Fiddle

【讨论】：

是的，这行得通！谢谢！