Как сделать <table> во всю высоту экрана? - Компьютерный форум OSzone.net

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)

- Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)

- - Как сделать <table> во всю высоту экрана? (http://forum.oszone.net/showthread.php?t=85378)

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

Народ подскажите, может кто сталкивался с такой проблемой. Надо растянуть таблицу на весь экран, как по ширине, так и по высоте. Это делается легко с помощью строк

Код:

<table width="100%" height="100%">

Однако, если в начале перед <html> стоит строчка

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

то команда height="100%" не работает. Таблица правильно растягивается по всей ширине экрана, но не растягивается по высоте. Всё работает как надо, весь сайт отображается корректно, как и задумывалось, но вот height="100%" отказывается работать.

А вот если написать перед <html> вот такие строки

Код:

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

то команда height="100%" начинает работать, но перестаёт работать всё остальное. Шапка сайта сразу начинает плыть, начинает как то странно работать CSS, по ведомым только Богу законам. Слетают часть шрифтов, а часть шрифтов работает нормально. Одним словом сайт превращается в АБРА-КОДАБРУ, зато команда height="100%" работает прекрасно.

А вот сам вопрос. Как можно заставить работать height="100%" со строками перед <html>

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

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

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

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

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

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

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>

Вот тут то и самая загвостка. В 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 таблица отображалось корректно.

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

Спасибо, 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 и работает из архива.

Извиняюсь за неоперативность - был в отпуске.
Попробуйте 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]-->

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