Таблица не менее 100% экрана для xhtml 1.0

[RXL]

Распространенный метод - атрибут height таблицы - отсутствует в спецификациях html 4.0 и выше. Чтобы создавать современный код (не ниже xhtml 1.0 transitional) нужно найти замену, соответствующую стандартам.

Я попробовал реализовать распорку:

- отдельная ячейка в таблице с rowspan на все строки, содержит div;
- div имеет width - 0px и background-image - прозрачный gif 1х1 (иначе IE игнорирует изменение размера пустого блока);
- в конце страницы вставка JS для растяжки div-а на высоту окна.
- растяжка html и body на 100% (экрана и содержимого)

Работает на ура в Seamonkey 1.0.5 (Gecko 1.8.0.7) и IE6.

Фрагмент кода (содержимое body):

Код: (Text)

<div id="main_background">
        <table cellpadding="0" cellspacing="0" id="main_layout">
                <tr>
                        <td rowspan="5"><div id="vert_stick"></div></td>
                        <td><!-- header --></td>
                </tr>
                <tr>
                        <td><!-- upper menu --></td>
                </tr>
                <tr>
                        <td><!-- body --></td>
                </tr>
                <tr>
                        <td><!-- lower menu --></td>
                </tr>
                <tr>
                        <td><!-- footer --></td>
                </tr>
        </table>
</div>

<script type="text/javascript">//<![CDATA[
document.getElementById('vert_stick').style.height =
        (window.innerHeight ? window.innerHeight : document.body.clientHeight) + 'px';
//]]></script>

Код: (CSS)

html
{
        height: 100%;
        background-color: #339999;
}

body
{
        margin: 0;
        padding: 0;
        height:auto !important;
        height: 100%;
        min-height:100%;
        background-color: #339999;
        color: black;
        font-family: verdana,arial,sans-serif,helvetica;
        font-size: 12px;
        font-weight: normal;
}

div
{
        margin: 0;
        padding: 0;
}

table
{
        empty-cells: show;
}

#main_mainground
{
        background-color: #EBEBEB;
}

#main_layout
{
        width: 100%;
}

#vert_stick
{
        background: url("images/1.gif");
        border: none;
        width: 0px;
        float: right;
        margin: 0;
        padding: 0;
}

Осталась следующая проблема: при малом объеме ячейки растягиваются и внешний вид приобретает некрасивый вид.
Какие есть идеи по фиксированию размера отдельных строк - чтобы вся избыточная высота досталась одной строке (body)?

[RXL]

Результат борьбы с IE и Mozilla можно наблюдать тут: http://club.shelek.ru/alt2/exp.php

Вставил распорку и растягиваю ее до размеров экрана или страницы (IE).
В body вложена таблица из 5 строк: заголовок, верхнее меню, основная часть, нижнее меню, footer.
Для всех блоков, кроме основной части, в CSS определил height в пикселях (имеено для строк - tr). IE этот случай игнорирует.
В конце файла поместил ф-ию, которая делает ставит распорку и, персонально для IE, устанавливает размер основной части.
Также эту ф-ию повесил на window.onresize. Для IE она выполняет перезагрузку страницы, для нормальных браузеров - просто меняет размер.

Offtopic:

IE - большая куча Г.

Поставлю в угол.

[RXL]

Opera 9.02 - подходит метод IE - задание размера средней части. Колбасит вертикальное выравнивание. Как оказалось, Opera не наследует tr/vertical-align для td.

FireFox 2.0 - реакция как у Mozilla.

[Chuda]

кстати.
а если попробовать так?

Код:

html {
	height: 100%;
}
body {
	height: 100%;
}
#all {
	min-height: 100%;
	position: relative;
	width: 100%;
}
	* html #all {
		height: 100%;
	}

у меня работает. (opera 7-8-9, сафари2, конк3.5, файрфокс1.5-2, ие6-7)
А ещё к этой конструкции снизу можно подвал прибить такой, чтобы не уползал наверх, если содержимого мало.