如何使中间列 div 始终扩展以适应？答案

【问题标题】：How can I make the middle column div always expand to fit?如何使中间列 div 始终扩展以适应？
【发布时间】：2013-04-13 08:09:29
【问题描述】：

我有一个基本布局，它是一个 Div 容器包装器和三列 Div。我希望左右列是固定的，中间的列是动态的以适应它的开放空间。

这是一张图片来展示它现在的样子：

红色边框是容器，蓝色边框 div 是我想要扩展以尽可能宽的容器，因此黄色 div 几乎总是接触到父级的右边框。

谢谢！

#body
{
    border: 1px solid red;
    min-height:800px;
    width:auto;
    margin-left:50px;
    margin-right:50px;    
}

#leftnavigation
{
    border: 1px solid green;
    min-height:500px;
    float:left;
    width:190px;
}

#contentarea
{
    border:1px solid blue;
    min-height:500px;
    float:left;
    width:auto;
    margin-left:5px;
    margin-right:5px;
}

#advertisingarea
{
    border:1px solid orange;
    width:150px;
    float:left;
    min-height:500px;
}

.advert
{

}

<div id="body">
        <div id="leftnavigation"></div>
        <div id="contentarea">sdfg<h1>asdasd</h1></div>
        <div id="advertisingarea">
            <div class="advert">
                <img src="../../Content/images/advertImage.png" alt="Advert" />
            </div>

            <div class="advert">
                <img src="../../Content/images/advertImage.png" alt="Advert" />
            </div>

            <div class="advert">
                <img src="../../Content/images/advertImage.png" alt="Advert" />
            </div>
        </div>
    </div>

【问题讨论】：

标签： css layout html

【解决方案1】：

由于现在所有现代浏览器都普遍支持 display:table-cell，您不妨使用它：http://jsfiddle.net/Lbpeh/1/

HTML

<div id="root">
    <div id="left">
        Left
    </div>
    <div id="middle">
        Middle
    </div>
    <div id="right">
        Right
    </div>
</div>

CSS

#root {
    display:table;
    border-spacing:0;
    width:100%;
    height:500px;
}
#root > div {
    display:table-cell;
}
#left {
    background:red;
    width:25%;
}
#middle {
    background:green;
}
#right {
    background:blue;
    width:100px;
}

请记住，类似表格的布局有其自身的一些问题，但您实际上想要实现的是具有语义更正确标记的表格的行为。这就是 display:table-cell 的用途。

【讨论】：

【解决方案2】：

有不少：

http://www.codeproject.com/KB/HTML/relatively_simple.aspx

http://www.tjkdesign.com/articles/3cols.asp

http://www.alistapart.com/articles/holygrail

3 columns layout via DIVs (middle-flexible, all flexible height, STRICT mode)

【讨论】：

哇哇哇——这个用例是 CSS 的“圣杯”吗？我只是一个 CSS 中级人，甚至还没有那么好，我应该坚持这个还是只是给中间 div 一个固定的高度？
我说复制最接近您所追求的布局。然后调整完成。