Как сделать <table> во всю высоту экрана?

Prisoner · Отправлено: **00:48, 14-06-2007** | #2

Доброго времени суток. При коротком доктайпе (html) броузер рисует страницу в режиме совместимости. Потому что доктайп неправильный в таком виде. В режиме совместимости может быть большой бардак ибо нет стандартов. В случае второго доктайпа (xhtml) броузер переключается в режим соответствия стандартам в котором у table нет атрибута высоты, ее предлагают регулировать с помощью стилей. Стало быть:
1) Решение растяжения по высоте
2) статья по доктайпам

Andrei_IW · Отправлено: **17:21, 16-06-2007** | #3

Всё не могу, мозги кипят, всё перепробовал. Этот стандарт W3C сразу не даётся моему пониманию.

Прочитал вышеизложенный текст и добавил с CSS

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

Таблицу растянуть на весь экран это помогло, но вот жёсткие размеры других частей этой же таблицы сбились. И теперь я не знаю что делать. Хотел найти ответ в интернете, но что то не нашёл. Собственно нужно вот что:

Сделать таблицу 100% ширины и высоты, нижней ячейке задать высоту к примеру 100px, верхней в 155px, а оставшуюся часть экрана (среднюю) растягивалась. Подскажите, как это можно реализовать с помощью CSS?

Prisoner · Отправлено: **00:35, 17-06-2007** | #4

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

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-Type" content="text/html; charset=windows-1251" />
<meta http-equiv="content-language" content="ru" />
<title>The table</title>
<style type="text/css">
html, body {
  height:100%;
  margin: 0;
  padding: 0;
}

table {
  border: 0 none;
  border-collapse: collapse;
}

table td {
  padding: 0;
  border: 0 none;
}

table.rootTable {
  width: 100%;
  height: 100%;
}

table.rootTable td.header {
  background: red;
  height: 155px;
}

table.rootTable td.body {
  background-color: yellow;
  _height: expression(document.documentElement.clientHeight - 155 - 100 + 'px');
}

table.rootTable td.footer {
  background: green;
  height: 100px;
}
</style>
</head>
<body>
<table class="rootTable">
  <tr><td class="header">header</td></tr>
  <tr><td class="body">body</td></tr>
  <tr><td class="footer">footer</td></tr>
</table>
</body>
</html>

Andrei_IW · Отправлено: **15:08, 17-06-2007** | #5

Вот тут то и самая загвостка. В Oper-е 9.20 всё отображается так как надо, а вот IE-7.0 верхняя часть таблицы стала 406px, средняя 50px, а нижняя 262px. И я не могу понять алгоритм, откуда IE-7.0 взял эти значения? Ведь они нигде не прописаны. Такое ощущение, что значения 407, 50 и 262рх IE-7.0 взял с потолка. Но как так получилось, ведь написано чёрному по белому

table.rootTable td.header {
background: red;
height: 155px;
}

Откуда IE-7.0 взял эти 406px? Вот над вопросом я бьюсь уже чуть больше недели. Столько уже всего перечитал и до сих пор не могу понять логику IE-7.0. На одном из форумов по Мамбе у одного админа была такая же проблема. И он ещё решил заменой

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

на

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Я так попробовал, и действительно работает. И в IE-7.0 и в Oper-е 9.20 таблица отображается как надо. Верхняя часть таблицы как и надо 155px, нижняя 100px, а средняя растягивается. Но тут же слетают все шрифты заданные в CSS, плюс сразу начинает плыть шапка сайта и сайт превращается в абра-кодабру. Другое дело

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

И я ищу ответ, как с этим тэгом сделать так, что б в IE-7.0 таблица отображалось корректно.

Prisoner · Отправлено: **02:07, 19-06-2007** | #6

А для IE7 приведенный мной код не работает как надо? У меня (WinXP SP2 pro) IE6 и FF2 - на ура...

Eholov · Отправлено: **19:15, 13-07-2007** | #7

Спасибо, Prisoner за решение. Работает везде классно, кроме долбанного IE 7. Таблица растягивается по высоте экрана, но body становиться узким. Убрал _ из _height, в IE7 отображается нормально, в ie6 отображается как до этого отображалось в IE7. В примере debugger.ru/demo/other/pagetemplate/PageTemplate.html (debugger.ru/demo/other/pagetempl … ate.v3.zip) без таблицы footer прибивается к низу. Тестил на IE6, IE7, FF2, Opera7. Хочется получить таблицу как предложил Prisoner, но чтоб работал и под IE7. Могу выложить IE7, которій при установке не убивает IE6 и работает из архива.

Prisoner · Отправлено: **15:24, 17-07-2007** | #8

Извиняюсь за неоперативность - был в отпуске.
Попробуйте conditional comments для body так чтобы для IE7 не было height: 100%:
1) убрать из css для body height;
2) в коде странички

Код:

<!--[if lt IE 7]><body style="height: 100%;"><![endif]-->
<!--[if IE 7]><body><![endif]-->

Может что-то пойдет не так, но поигравшись с этими вещами и покопав по условным коментариям в Сети Вы поймете как достигнуть нужного результата.