CSS：讓填寫表格整個網站

Question

我有這個測試網站，只有這樣在它的身上：

<div id="tableHolder"> 
    <table style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; border: 1px solid"> 
    <tr> 
     <td> 
     <div id="image-canvas" style="width: 800px; height: 600px"></div> 
     </td> 
     <td valign="top"> 
     <div id="list" style="width:400px; overflow: auto; height: auto; max-height: 600px; resize: vertical;"></div> 
     </td> 
    </tr> 
    </table> 
</div> 

我怎樣才能使這個充滿整個站點，而不是隻有1200x600像素？ 單獨設置100％沒有幫助。

Answer 1

正如那些傢伙說的那樣，在TABLE樣式中添加寬度和高度。接下來是您的代碼更改（我也將邊框更改爲5和紅色，使其更加明顯）。我試了一下，在Firefox，Chrome和IE：

<div id="tableHolder"> 
    <table style="height:100%;width:100%;position: absolute; top: 0; bottom: 0; left: 0; right: 0; border: 5px solid red"> 
    <tr> 
     <td> 
     <div id="image-canvas" style="width: 800px; height: 600px"></div> 
     </td> 
     <td valign="top"> 
     <div id="list" style="width:400px; overflow: auto; height: auto; max-height: 600px; resize: vertical;"></div> 
     </td> 
    </tr> 
    </table> 
</div> 

重要提示：如果您更改格「tableHolder」」的風格，該表會看壞，這就是爲什麼我改變了表格樣式，而不是div的。爲了證明這一點，我將發佈代碼與DIV樣式的變化：

<div id="tableHolder" style="height:100%;width:100%;background:yellow;"> 
    <table style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; border: 5px solid red"> 
    <tr> 
     <td> 
     <div id="image-canvas" style="width: 800px; height: 600px"></div> 
     </td> 
     <td valign="top"> 
     <div id="list" style="width:400px; overflow: auto; height: auto; max-height: 600px; resize: vertical;"></div> 
     </td> 
    </tr> 
    </table> 
</div> 

如果你想玩安全，改變兩個！

Answer 2

你的問題並沒有真正讓我知道你要找的，但這個工程：

https://jsfiddle.net/fj47s0ur/

增加高度：100％;和寬度：100％到TABLE元素。

<div id="tableHolder"> 
    <table style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; border: 1px solid;width:100%;height:100%"> 
    <tr> 
     <td> 
     <div id="image-canvas" style="width: 100%; height: 100%"></div> 
     </td> 
     <td valign="top"> 
     <div id="list" style="width:100%; overflow: auto; height: min-height; max-height: 100%; resize: vertical;"></div> 
     </td> 
    </tr> 
    </table> 
</div>