| |
|
|
| | Есть вот такой пример:
<table border=1 width=100% height=100%>
<tr><td height=80% align=left valign=top>
<div style="width: 100%;height: 100%;border: black solid 1px;overflow: auto;">
1<br>2
</div>
</td></tr>
<tr><td height=20% align=left valign=top>row2</td></tr>
</table>
|
Проблема в том, что при заполнение дива и появлении вертикального скроллбара, в разных браузерах он отбражается по разному.
<table border=1 width=100% height=100%>
<tr><td height=80% align=left valign=top>
<div style="width: 100%;height: 100%;border: black solid 1px;overflow: auto;">
1<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>2
</div>
</td></tr>
<tr><td height=20% align=left valign=top>row2</td></tr>
</table>
|
В IE (6.0) все правильно: див растягивается на 100% в ячейке.
В FF (1.5) неправильно: див растягивается под размер контента. То есть, скроллбар не функционирует.
В Opera (9.0) неправильно: высота дива становится нулевой. Контент не отображается.
Вопрос: Как сделать, что бы див с высотой указанной в процентах, правильно (как в IE) отображался во всех браузерах? | |
| |
|
|
| |
|
|
| |
для: Drago
(16.04.2007 в 19:33)
| | | если это весь html, то надо прописать
body,html{height:100%} | |
| |
|
|
| |
|
|
| |
для: AlexSol
(16.04.2007 в 22:42)
| | | Сделал так:
<html>
<head>
<style>
body,html {height: 100%}
</style>
</head>
<body>
<table border=1 width=100% height=100%>
<tr><td height=80% align=left valign=top>
<div style="width: 100%;height: 100%;border: black solid 1px;overflow: auto;">
1<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>2
</div>
</td></tr>
<tr><td height=20% align=left valign=top>row2</td></tr>
</table>
</body>
</html>
|
Результат нулевой. То есть, ничего не изменилось. | |
| |
|
|
| |
|
|
| |
для: Drago
(17.04.2007 в 01:24)
| | | Для FF лекарство есть - этому браузеру надо, чтобы размеры областей были явно указаны у всей цепочки родительских элементов вплоть до BODY (в атрибутах или в стилях). Здесь в коде отсутствует тег <TBODY>, который и надо вписать с размерами:
<table border=1 width=100% height=100%><tbody style="height: 100%">
<tr><td height=80% align=left valign=top>
<div style="width: 100%;height: 100%;border: black solid 1px;overflow: auto;">
1<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>2
</div>
</td></tr>
<tr><td height=20% align=left valign=top>row2</td></tr>
</tbody>
</table>
|
Логика FF, в общем, понятная... если размер области не указан, то он определяется браузером автоматически и получает значение auto, проценты от которого браузер брать затрудняется.
Что надо в этом случае Opera, сказать не могу - не знаю. | |
| |
|
|
| |
|
|
| |
для: CNT
(17.04.2007 в 12:10)
| | | Благодарю.
В FF теперь отображается правильно. Разве что, за исключением появления вертикального скроллбара у всей страницы. Но, это не критично и решается уменьшением высоты таблицы на 1%.
Кто подскажет, как же исправить код, чтобы он правильно отображался и в Opera? | |
| |
|
|
|
|
| |
|
|
| |
для: Drago
(17.04.2007 в 15:27)
| | | ну... я предположил, что у тебя не таблица как элемент страницы, а как способ верстки :)
фреймов там нет. | |
| |
|
|
| |
|
|
| |
для: AlexSol
(17.04.2007 в 15:39)
| | | Скорее, и то, и другое.
Мне нужно в ячейке таблицы расположить див, растягивающийся на всю высоту ячейки. | |
| |
|
|
| |
|
|
| |
для: Drago
(17.04.2007 в 15:51)
| | | Неужели, нельзя ничего сделать, чтобы Опера нормально отображала этот див? | |
| |
|
|
| |
|
|
| |
для: Drago
(18.04.2007 в 17:41)
| | | только задать в конкретных еденицах. такая вот она, опера... | |
| |
|
|
| |
|
|
| |
для: Lelik
(18.04.2007 в 17:45)
| | | Чтож, жаль конечно. Спасибо за ответ. | |
| |
|
|
| |
|
|
| |
для: Drago
(17.04.2007 в 15:51)
| | | . | |
| |
|
|
| |
|
|
| |
для: Drago
(17.04.2007 в 13:57)
| | | Снова столкнулся с той же проблемой в FF. Обрамил эту таблицу еще одной. В результате, тег <tbody> утратил нужное мне свойство и див, опять, растягивается на высоту контента.
<html>
<body>
<table width=100%><tr><td>
<table border=1 width=100% height=99%><tbody style="height: 100%">
<tr><td height=80% align=left valign=top>
<div style="width: 100%;height: 100%;border: black solid 1px;overflow: auto;">
1<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>2
</div>
</td></tr>
<tr><td height=20% align=left valign=top>row2</td></tr>
</tbody></table>
</td></tr></table>
</body>
</html>
|
Пробовал добавить тег <tbody> и в обрамляющую таблицу, но эффекта это никакого не дало.
Что можно предпринять в этом случае?
Добавлено
Перечитал еще раз сообщение CNT:
Для FF лекарство есть - этому браузеру надо, чтобы размеры областей были явно указаны
у всей цепочки родительских элементов вплоть до BODY (в атрибутах или в стилях).
|
И сразу все исправил :) | |
| |
|
|
