Сделать таблицу заполнением всего окна

Как я могу сделать таблицу HTML заполнять все окно браузера по горизонтали и по вертикали?

Страница - это просто заголовок и оценка, которая должна заполнить все окно. (Я понимаю, что фиксированные размеры шрифтов являются отдельной проблемой.)

<table style="width: 100%; height: 100%;">
    <tr style="height: 25%; font-size: 180px;">
        <td>Region</td>
    </tr>
    <tr style="height: 75%; font-size: 540px;">
        <td>100.00%</td>
    </tr>
</table>

Когда я использую приведенный выше код, ширина таблицы правильная, но высота сжимается, чтобы соответствовать двум строкам текста.

Я, скорее всего, буду вынужден использовать Internet Explorer 8 или 9, чтобы представить эту страницу.

Ответы

Ответ 1

Вы можете использовать такую ​​позицию, чтобы растянуть элемент в родительском контейнере.

<table style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
    <tr style="height: 25%; font-size: 180px;">
        <td>Region</td>
    </tr>
    <tr style="height: 75%; font-size: 540px;">
        <td>100.00%</td>
    </tr>
</table>

Ответ 2

вы можете увидеть решение на http://jsfiddle.net/CBQCA/1/

ИЛИ

<table style="height:100%;width:100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0;border:1px solid">
     <tr style="height: 25%;">
        <td>Region</td>
    </tr>
    <tr style="height: 75%;">
        <td>100.00%</td>
    </tr>
</table>​

Я удалил размер шрифта, чтобы показать, что столбцы расширены. Я добавил border:1px solid, чтобы убедиться, что таблица расширена. вы можете удалить его.

Ответ 3

Ниже строка помогла мне исправить вопрос о полосе прокрутки для таблицы; проблема была неудобной 2 полосы прокрутки на странице. Ниже стиль, когда применяется к таблице работал отлично для меня.
<table Style="position: absolute; height: 100%; width: 100%";/>

Ответ 4

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

<html style="height: 100%;">
    <body style="height: 100%;">
        <table style="height: 100%;">
        ...

чтобы заставить всех родителей элемента table расшириться по доступному вертикальному пространству (что исключает необходимость использования позиционирования absolute).

Работает в Firefox 28, IE 11 и Chromium 34 (и, следовательно, возможно, Google Chrome).

Источник: http://www.dailycoding.com/posts/howtoset100tableheightinhtml.aspx

Ответ 5

Это потому, что, конечно, нет высоты АКТУАЛЬНОЙ страницы. Имейте в виду, что вы просматриваете содержимое страницы вертикально, а не горизонтально, создавая ограниченную ширину, но неограниченную высоту. То, что выбрал выбранный, состояло в том, чтобы заставить таблицу заняться видимой областью и остаться там независимо от того, что (абсолютное позиционирование). Теоретически то, что вы пытались сделать, было невозможно 😉😉

Ответ 6

Это отлично работает для меня:

<style type="text/css">
#table {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
}
</style>