Как растянуть таблицу HTML на 100% высоты окна браузера?

Я использую таблицу для разработки макета моей веб-страницы. Я хочу, чтобы таблица заполняла страницу, даже если она не содержит много контента. Вот 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 не помогает.)


html layout css html-table
person Mikhail    schedule 18.09.2008    source источник

Ответы (3)


arrow_upward
8
arrow_downward

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

person Vincent McNabb    schedule 18.09.2008

arrow_upward
20
arrow_downward

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

html, body    {
  height: 100%;
}

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

person deathlock    schedule 05.07.2011

arrow_upward
0
arrow_downward

Вы можете справиться с этим в Javascript/JQuery.

window_height = $(window).height();
$('#container').css('min-height', window_height);
person Priyanga    schedule 15.10.2019