表全宽div [英] table full width div

问题描述

我想解决一个问题，其中一个页面意味着有一个固定宽度的左侧导航，右边的主div占据屏幕的其余部分。

I'm trying to solve a problem where a page is meant to have a fixed-width left-hand nav, and a main div to its right, taking up the rest of the width of the screen.

右边的主div包含一个表，我想要该表展开以适应主区域的整个宽度。

The main div on the right is meant to contain a table, and I want the table to expand to fit the width of the entire width of the main area.

有一种方法可以在CSS中做到这一点吗？

Is there a way to do this in 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;
}

如何让表填充页面的剩余部分？ p>

How can I make the table fill the remaining part of the page?

推荐答案

这时最容易和最少的hackish方法是部署 display：表和 display：table-cell ：

The easiest and least "hackish" way of doing this at this at this time is to deploy display: table and 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 对于非文本布局是一个长期的借的效果;

Using float for non-text layout is a long-in-the-tooth "borrowing" of it's effect; the sooner is crawls into the grave of "useful ideas back in those days", the better we'll all be.

这种最好的方法将会当然，可以执行 Flexbox 实施（ W3C提议的规范）。那一天不在这里。

The "best" approach for this would, of course, be to do a Flexbox implementation (W3C proposed specification). That day's not here yet.

这篇关于表全宽div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！