Ошибка в Gecko?

VEG · №1

Очень похоже на ошибку. Если у элемента установлен 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 - прошу вас скорее проинформировать разработчиков...

Lynn · №2

Внимательнее читайте стандарт.
Высота в процентах работает только если у родительского объекта задана высота.

VEG · №3

Странно, что в стандартах так прописано. Но как себя должен вести блок, как я понимаю, там не написано... Пора бы усложнить стандарт
А как посоветуете обойти проблему? В таблице несколько таких элементов, и они должны занимать 100% области родительской ячейки. Такое возможно?

VEG · №4

Хочу заметить, что горизонтальный скролл когда надо появляется правильно, и ничего не растягивается. Вот с вертикальным что делать? Вроде как логично, что надо скролл вертикальный делать, если не влазит...

Lynn · №5

VEG
ответил на xpoint'е.

VEG · №6

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 - внаружу. Для обхода этого факта пришлось бы еще подключать массу хаков... Поэтому и решил все сделать через таблицу. Все стили установислись нормально, только вот прокрутки...
Извините за назойливость.

VEG · №7

Кстати, приведенный код работает в IE - не расползается таблица. Поставил Opera 8.53 - тоже пошло...

Но у оперы вообще абсолютное позиционирование и ячейки таблиц в процентах работают отвратительно при изменении размера окна. В большинстве случаев элементы постоянно прыгают, а иногда бывают даже странно дергаются и страница расползается, но по F5 в уменьшенном окне страница отображается нормально.
Еще глюк - кнопки скроллинга в div'ах не прячутся когда не нужны, хотя самх скроллов нет (контент под кнопками прячется).
Вот такая вот Опера. Сделано, но через одно место...

maXmo · №8

если уж говорить о стандартах, то почему td (height: 100%) расширяется до размеров окна, а table (height: 100%) - непонятно до каких размеров? Почему до размеров окна надо растягивать именно td, a не table? Логика в этом сомнительная, а также это не позволяет решить озвученную проблему. Как сделать так, чтобы таблица занимала всё окно, а её контент занимал столько места, сколько дадено?

Отредактировано maXmo (22-03-2006 23:07:26)

VEG · №9

maXmo, логично, что не прописывать высоту у td;) Только после этого не хотят нормально работать некоторые вещи... Замкнутый круг. Хотя хаки обязательно должны быть.

maXmo · №10

не пропишешь высоту у td - такой ахтуг получается!!
И таблица начинает занимать больше, чем окно.

Отредактировано maXmo (23-03-2006 22:24:48)

Полезная информация

№120-03-2006 21:14:51