Как сделать <table> во всю высоту экрана? [Версия для КПК]

Показать полную графическую версию : Как сделать <table> во всю высоту экрана?

Andrei_IW

13-06-2007, 21:56

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

<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">

Prisoner

14-06-2007, 00:48

Доброго времени суток. При коротком доктайпе (html) броузер рисует страницу в режиме совместимости. Потому что доктайп неправильный в таком виде. В режиме совместимости может быть большой бардак ибо нет стандартов. В случае второго доктайпа (xhtml) броузер переключается в режим соответствия стандартам в котором у table нет атрибута высоты, ее предлагают регулировать с помощью стилей. Стало быть:
1) Решение растяжения по высоте (http://htmlcoder.visions.ru/CSS/?22)
2) статья по доктайпам (http://www.webmascon.com/topics/coding/25a.asp)

Andrei_IW

16-06-2007, 17:21

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

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

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

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

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

Prisoner

17-06-2007, 00:35

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

17-06-2007, 15:08

Вот тут то и самая загвостка. В 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

19-06-2007, 02:07

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

Eholov

13-07-2007, 19:15

Спасибо, 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

17-07-2007, 15:24

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



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