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>