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> 

Важно: если вы измените DIV «tableHolder»»стиль, таблица будет выглядеть плохо, поэтому я изменил стиль таблицы, а не 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>