0

我正在尝试解决一个问题，即页面具有固定宽度的左侧导航，右侧有一个主 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;
}

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

4

4 回答 4

1

我会使用以下内容：

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

这会将您的 wrapper 设置为可用屏幕的 100%，使您的左侧导航为 100px，并且 #mainBody 为剩余内容的 100%。

于 2012-09-29T06:00:44.213 回答
1

此时最简单和最不“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 提议的规范）。那一天还没有到来。

于 2012-09-29T06:27:54.563 回答
0

设置 display: table for #overall 和 display: table-cell 用于内部 div

于 2012-09-29T06:02:24.687 回答
0 
#overallDiv {width: auto; float: left;}
#lhn {width: 100px; float: left;}
#mainBody{float: left; width: auto;}
#mainBody table {width: 100%;}
于 2012-09-29T06:07:10.227 回答