表全寬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

在這個時候，在這個這樣做的最簡單和最「的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 2

我會用以下內容：

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

這將設置你的包裝，以可用屏幕的100％，這使得您的左側導航100像素，和#mainBody的剩下100％。

Answer 3

套裝顯示：表#overall並顯示：表細胞的內部的div

Answer 4

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