Очень похоже на ошибку. Если у элемента установлен overflow: auto; width и height в процентах, то скроллы у области не появляется, когда контент не влазит, и тогда страница расползается.
У меня более сложный случай, но я его свел к минимальному:
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Overflow Test</title>
<style type="text/css">
.overflow {
position: relative;
width: 100%;
height: 100%;
top: 0px; right:
0px; bottom: 0px;
left: 0px;
overflow: auto;
}
.main {
vertical-align: top;
background-color: #f2f2fa;
padding: 3px 10px 3px 10px;
}
* {
font: 13px Verdana,Arial,Helvetica,Tahoma,sans-serif;
}
</style>
</head>
<body>
<table width="80%" height="80%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="80%" height="80%" colspan="1" rowspan="1" valign="top" class="main">
<div class="overflow">
ab<br>ab<br>ab<br>ab<br>ab<br>ab<br>ab<br>ab<br>ab<br>ab<br>ab<br>ab<br>ab<br>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>В IE и Opera работает. Как бороть проблему?
Если это действительно не моя ошибка, а ошибка Gecko - прошу вас скорее проинформировать разработчиков...
Внимательнее читайте стандарт.
Высота в процентах работает только если у родительского объекта задана высота.
Странно, что в стандартах так прописано. Но как себя должен вести блок, как я понимаю, там не написано... Пора бы усложнить стандарт
А как посоветуете обойти проблему? В таблице несколько таких элементов, и они должны занимать 100% области родительской ячейки. Такое возможно?
Хочу заметить, что горизонтальный скролл когда надо появляется правильно, и ничего не растягивается. Вот с вертикальным что делать? Вроде как логично, что надо скролл вертикальный делать, если не влазит...
VEG
ответил на xpoint'е.
Lynn, пример работает, но я не понял, почему
Ваш код привел к такому рабочему примеру (для простоты):
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Overflow Test</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
.overflow {
height: 100%;
overflow: auto;
}
</style>
</head>
<body>
<table style="width: 80%; height: 80%; background: #ced; border-collapse: collapse;">
<tbody style="height: 100%;">
<tr style="height: 100%;">
<td style="height: 100%;">
<div class="overflow">
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>У tbody стоит 100% высота, но таблица не выходит за пределы заданных в table 80%. Почему таблица не растянулась? Как я понимаю, по той причине, что в table высота ограничена 80%, и это имеет больший приоритет. Или я как-то не так понимаю смысл tbody?
В моем случае выходит такая таблица:
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Overflow Test 2</title>
<style type="text/css">
* { font: 13px Verdana,Arial,Helvetica,Tahoma,sans-serif; }
html, body {
margin: 0px;
padding: 0px;
height: 100%;
}
.overflow {
height: 100%;
overflow: auto;
}
.main {
background-color: #f2f2fa;
}
</style>
</head>
<body>
<table style="width: 100%; height: 100%; border-collapse: collapse;">
<thead>
<tr style="height: 80px;">
<td style="height: 80px;" colspan="2">Заголовок</td>
</tr>
</thead>
<tfoot style="height: 60px;">
<tr style="height: 60px;">
<td style="height: 60px;">footer left</td>
<td style="height: 60px; width: 200px;">footer right</td>
</tr>
</tfoot>
<tbody style="height: 100%;">
<tr style="height: 100%;">
<td class="main" style="height: 100%;"><div class="overflow">
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
</div></td>
<td style="height: 100%; width: 200px;"><div class="overflow">
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
</div></td>
</tr>
</tbody>
</table>
</body>
</html>Как видите, таблица растянута на всю свободную область, у таблицы имеются thead и tfoot с заданной в пикселях высотой, а выстоа tbody равна 100%. По логике предыдущего примера оно должно будет заполнить оставшееся место на экране... Но высота tbody становится равна именно высоте экрана, т.е. таблица растягивается ровно на высоту tfoot и thead.
Маленькое отступление. Все эти элементы на экране я сперва делал не через таблицу, а через абсолютное позиционирование div'ов на экране средствами CSS2. В Firefox все работало, но когда я попробовал открыть страницу в IE - был великий облом. IE не понимает случая, когда установлен top и bottom в пикселях, а выстоа установлена в auto. После этого я сделал два хака для IE через // и expression(). В итоге все поля стали устанавливаться корректно, но потом обнаружилось, что IE рисует border и отступает padding и margin внутрь элемента, а firefox - внаружу. Для обхода этого факта пришлось бы еще подключать массу хаков... Поэтому и решил все сделать через таблицу. Все стили установислись нормально, только вот прокрутки...
Извините за назойливость.
Кстати, приведенный код работает в IE - не расползается таблица. Поставил Opera 8.53 - тоже пошло...
Но у оперы вообще абсолютное позиционирование и ячейки таблиц в процентах работают отвратительно при изменении размера окна. В большинстве случаев элементы постоянно прыгают, а иногда бывают даже странно дергаются и страница расползается, но по F5 в уменьшенном окне страница отображается нормально.
Еще глюк - кнопки скроллинга в div'ах не прячутся когда не нужны, хотя самх скроллов нет (контент под кнопками прячется).
Вот такая вот Опера. Сделано, но через одно место...
если уж говорить о стандартах, то почему td (height: 100%) расширяется до размеров окна, а table (height: 100%) - непонятно до каких размеров? Почему до размеров окна надо растягивать именно td, a не table? Логика в этом сомнительная, а также это не позволяет решить озвученную проблему. Как сделать так, чтобы таблица занимала всё окно, а её контент занимал столько места, сколько дадено?
maXmo, логично, что не прописывать высоту у td;) Только после этого не хотят нормально работать некоторые вещи... Замкнутый круг. Хотя хаки обязательно должны быть.
не пропишешь высоту у td - такой ахтуг получается!! 
И таблица начинает занимать больше, чем окно.