表全宽div

Question

我正在尝试解决一个问题，即页面的左手导航是固定宽度，右边是主div，占据屏幕宽度的其余部分。

右边的主要div意味着包含一个表格，我希望表格能够扩展到适合主要区域整个宽度的宽度。

有没有办法在CSS中执行此操作？

我的代码类似于：

<div id="overallDiv">

<div id="lhn">
Left-hand nav
</div>
<div id="mainBody">
    <table>
        <tr><td>A1</td><td>A2</td><td>A3</td></tr>
        <tr><td>B1</td><td>B2</td><td>B3</td></tr>
        <tr><td>C1</td><td>C2</td><td>C3</td></tr>
        <tr><td>D1</td><td>D2</td><td>D3</td></tr>
    </table>
</div>

</div>

我的CSS与此类似：

#lhn
{
    display:inline;
    float:left;
    width: 100px;
}
#mainBody
{
    display:inline;
    float:left;
}

如何让表格填满页面的其余部分？

Answer 1

我会使用以下内容：

#overallDiv {width: 100%;}
#lhn {width: 100px; float: left;}
#mainBody{float: left;}
#mainBody table {width: 100%;}

这会将您的包装设置为可用屏幕的100％，使您的左侧导航为100px，＃mainBody为剩余的100％。

Answer 2

目前执行此操作的最简单且最不“hackish”的方法是部署display: table和display: table-cell：

​#overallDiv {
    display: table;
    width: 100%;
}
#lhn,
#mainBody {
    display: table-cell;
}
#lhn {
    width: 200px;
    background: #ddd;
}
​#mainBody > table {
    width: 100%;
}​

http://jsfiddle.net/wxnBQ/

将float用于非文本布局是一种长期的“借用”它的效果;越早进入“那些日子里有用的想法”的坟墓，我们就会越好。

当然，“最佳”方法是Flexbox实施（W3C proposed specification）。那天还不到。

Answer 3

为#overall设置display：table并显示：inner divs的table-cell

Answer 4

#overallDiv {width: auto; float: left;}
#lhn {width: 100px; float: left;}
#mainBody{float: left; width: auto;}
#mainBody table {width: 100%;}