表全宽div

Question

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.

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.

Is there a way to do this in CSS?

I have code similar to this:

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

My CSS is similar to this:

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

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

Answer 1

I would use the following:

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

This sets your wrapper to 100% of the available screen, makes your left-hand nav 100px, and #mainBody 100% of what is left.

Answer 2

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/

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.

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

Answer 3

设置display：table为#overall，display：table-cell为内部div

Answer 4

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