Проблема с CSS, таблица, не заполняющая экран

Question

У меня возникла проблема с таблицей, которую я хочу заполнить в окне браузера. Это 3 колонки в ширину и 5 строк. Мой желаемый результат состоит в том, что каждая ячейка составляет 33% от ширины экрана, и каждая ячейка составляет 20% от высоты экрана. Нет фиксированных значений, вместо этого я хочу делать все с процентами, чтобы он изменял/растягивает, чтобы всегда заполнять браузер.

Проблема заключается в том, что при изменении размера браузера, хотя ширина работает отлично, высота не работает одинаково. Несмотря на то, что я задал каждую строку TR как 20%, она не работает таким образом. Случается, что нижняя половина экрана остается пустой, а 5 строк не соответствуют высоте 20%, которую я указал. В одном странном случае (при попытке чего-то) первый ряд составлял 50% от высоты, а остальные 50% были нижними 4 строками. В настоящее время (как показано ниже) эти 5 рядов занимают около 60% высоты экрана, а остальные 40% не используются. Я упоминал, что ненавижу CSS?

Вот таблица:

<div id="portrait" style="width:100%;height:100%;"> 
    <table cellpadding=0 cellspacing=0 border=1 style="width:100%;height:100%;"> 
     <tr style="width:100%;height:20%;"> 
      <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td> 
      <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td> 
      <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td> 
     </tr> 
     <tr style="width:100%;height:20%;"> 
      <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td> 
      <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td> 
      <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td> 
     </tr> 
     <tr style="width:100%;height:20%;"> 
      <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td> 
      <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td> 
      <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td> 
     </tr> 
     <tr style="width:100%;height:20%;"> 
      <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td> 
      <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td> 
      <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td> 
     </tr> 
     <tr style="width:100%;height:20%;"> 
      <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td> 
      <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td> 
      <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td> 
     </tr> 
    </table> 
</div> 

В каждом уровне, я определяю ширину и высоту, а затем внутри я определяю относительное содержание имея в виду, родительский контейнер. На самом внутреннем уровне, где находится тег изображения, он установлен на 100% x100%, так что он заполняет его контейнер (ширина 33% определена в TD и высота 20%, определенная в TR).

Вот как я прочитал html выше, чем первое изображение. В div установлено значение 100% ширины браузера и 100% высоты. Он содержит только один элемент, таблицу. Таблица определена на 100% x100%, но это, конечно, ограничено родительским контейнером - div, но, как и 100% x100%, таблица должна быть полной размера браузера (IMHO). TR определяет ширину 100%, поэтому она заполняет ширину браузера. Он установлен на 20% высоты, поэтому я считаю, что это означает, что он должен быть зафиксирован на 20% от высоты стола, что составляет 20% от 100% экрана. ТД определяется как 33% ширины (3 столбца 33% для заполнения браузера), а высота 100% (этот столбец заполняет 100% его родительского ТР, который установлен на 20% от высоты браузера). Наконец, изображение настроено на заполнение TR/TD и поэтому установлено на 100% x100%.

Answer 1

Вот скрипка: http://jsfiddle.net/surendraVsingh/R3aCb/

А вот рабочий код:

HTML:

<div id="portrait" style="width:100%;height:100%;"> 
    <table cellpadding=0 cellspacing=0 border=1 height="100%" style="width:100%; height:100%;"> 
     <tr style="width:100%;height:20%;"> 
      <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td> 
      <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td> 
      <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td> 
     </tr> 
     <tr style="width:100%;height:20%;"> 
      <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td> 
      <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td> 
      <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td> 
     </tr> 
     <tr style="width:100%;height:20%;"> 
      <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td> 
      <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td> 
      <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td> 
     </tr> 
     <tr style="width:100%;height:20%;"> 
      <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td> 
      <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td> 
      <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td> 
     </tr> 
     <tr style="width:100%;height:20%;"> 
      <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td> 
      <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td> 
      <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td> 
     </tr> 
    </table> 
</div>​ 

CSS

html, body{height:100%;}​ 

Answer 2

Вам необходимо добавить следующее к вашему стилю.

html, body { height: 100% } 

и изменить свой

<td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td> 

в

<td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td> 

Вы можете увидеть его здесь, http://jsfiddle.net/RFdSw/

Answer 3

<!DOCTYPE html> 

<html> 
    <head> 
     <style type="text/css"> 
      html, body{height:100%;width:100%;margin:0;padding:0} 
      #mytable 
      { 
       height:100%; 
       width:100%; 
       table-layout:fixed; 
      }   
      #mytable td 
      { 
       width;33%; 
       height:19%; 
      } 
      #mytable td img 
      { 
       width:100%; 
       height:100%; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="portrait" style="width:100%;height:100%;"> 
    <table cellpadding="0" cellspacing="0" border="1" id="mytable"> 
     <tr> 
      <td><img src="bg-bottom.gif"></td> 
      <td><img src="x.jpg"></td> 
      <td><img src="x.jpg"></td> 
     </tr> 
     <tr> 
      <td><img src="x.jpg"></td> 
      <td><img src="x.jpg"></td> 
      <td><img src="x.jpg"></td> 
     </tr> 
     <tr> 
      <td><img src="x.jpg"></td> 
      <td><img src="x.jpg"></td> 
      <td><img src="x.jpg"></td> 
     </tr> 
     <tr> 
      <td><img src="x.jpg"></td> 
      <td><img src="x.jpg"></td> 
      <td><img src="x.jpg"></td> 
     </tr> 
     <tr> 
      <td><img src="x.jpg"></td> 
      <td><img src="x.jpg"></td> 
      <td><img src="x.jpg"></td> 
     </tr> 
    </table> 
</div> 

    </body> 
</html> 

Это должно сделать для вас.

Answer 4

Попробуйте

#portrait { 
    height: 0; 
} 
table { 
    height: 100%; 
} 
tr { 
    height: 20%; 
}