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

Question

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

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

红色边框是容器，蓝色边框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>

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

请记住，类似于表格的布局有一些问题，但您实际上要实现的是具有语义上更正确标记的表的行为。这就是显示：table-cell适用于。

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