Как растянуть HTML-таблицу до 100% высоты окна браузера? - PullRequest
11 голосов
/ 18 сентября 2008

Я использую таблицу для разработки макета моей веб-страницы. Я хочу, чтобы таблица заполняла страницу, даже если она не содержит много контента. Вот CSS, который я использую:

html, body {
    height: 100%;
    margin: 0;
    padding: 0; 
}

#container {
    min-height: 100%;
    width: 100%; 
}

И я помещаю что-то вроде этого в коде страницы:

<table id="container">
<tr>
<td>
...

Это работает для Opera 9, но не для Firefox 2 или Internet Explorer 7. Есть ли простой способ заставить это решение работать во всех популярных браузерах?

(Добавление id="container" к td не помогает.)

Ответы [ 2 ]

19 голосов
/ 05 июля 2011

Попробуйте использовать это:

html, body    {
  height: 100%;
}

Таким образом, помимо увеличения высоты таблицы до 100%, вам также необходимо убедиться, что html'd и высота тела также равны 100%, поэтому он будет правильно растягиваться.

8 голосов
/ 18 сентября 2008

Просто используйте свойство height вместо свойства min-height при установке #container. Как только данные становятся слишком большими, таблица автоматически увеличивается.

...