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>

重要提示：如果您更改div＆＃34; tableHolder＆＃34;＆＃39;风格，桌子看起来很糟糕，这就是为什么我改变了桌子的风格，而不是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％。

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

css：让表填满整个网站

2 个答案: