iFrame или DIV на высоту ячейки таблицы

dhtml · June 11, 2009

Нужно для FireFox:

———

| a | b |

———

| c | d |

———

простая таблица заданного размера 800*600

в ячейке d предполагается прокручиваемая информация (iframe или div), по всей доступной высоте.

Как: при заполнении ячеек а и b сжимать c и d (в d у фрейма должна появиться прокрутка) ???

Edited June 11, 2009 by dhtml

Searcher · June 11, 2009

Почему только для FireFox?

Какой doctype используете?

Если ячейки a и b заполняются динамически, то каким образом? JavaScript или что?

Не используйте iframe, достаточно div со свойством overflow: auto. Как только содержимое этого дива будет превышать его размеры, появится прокрутка.

Edited June 11, 2009 by Searcher

dhtml · June 11, 2009

Спасибо за ответ,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

A и B могут содержать любок кол-во строк в зависимости от ситуации.

А Нетскейп - по тех.заданию.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#inner {
	height: 100%;
	width: 100%;
	overflow: auto;
	color: #FCF;
}
table {
	height: 600px;
	width: 800px;
}
-->
</style>
</head>

<body>
<table width="800" border="1">
  <tr>
	<td><p>Пример текста</p>
	<p>Пример текста</p>
	<p>Пример текста</p>
	<p>Пример текста</p>
	<p>Пример текста</p></td>
	<td>Вся таблица - 800 х 600</td>
  </tr>
  <tr>
	<td>Пример текста</td>
	<td><div id="inner">
	  <p>Эта часть должна сжиматься при добавлении строк в верхних ячейках и быть 100% по высоте ячейки</p>
	  <p>Пример текста</p>
	  <p>Пример текста</p>
	  <p>Пример текста</p>
	  <p>Пример текста</p>
	  <p>Пример текста</p>
	  <p>Пример текста</p>
	  <p>Пример текста</p>
	</div></td>
  </tr>
</table>
</body>
</html>

Почему только для FireFox?
Какой doctype используете?
Если ячейки a и b заполняются динамически, то каким образом? JavaScript или что?
Не используйте iframe, достаточно div со свойством overflow: auto. Как только содержимое этого дива будет превышать его размеры, появится прокрутка.

Edited June 11, 2009 by dhtml

Searcher · June 11, 2009

Для начала. В стилях вы указали #div {...}, а в коде нет объекта с таким идентификатором. Решётка означает, что после неё идет имя объекта, а точка означает, что далее идет имя класса. Таким образом, если вы указываете #div {...}, то в коде должно быть следующее <div id="div">...</div> А если указываете .div {...}, то в коде <div class="div">...</div>. Нескольких объектов с одинаковыми идентификаторами на одной странице не должно быть, а с одним классом может быть сколько угодно. Вообще, почитайте разделы "CSS по шагам" и "HTML по шагам".

Edited June 11, 2009 by Searcher

dhtml · June 11, 2009

это всё мне известно, просто торопился, уже поправил.

А как быть с тем, что я спросил?

Searcher · June 11, 2009

Дело в том, что если не указана высота ячейки, то она вычисляется исходя из высоты содержимого. Так что просто указав высоту дива в ячейке в 100% и не указав высоту ячейки броузеру не от чего будет отталкиваться для вычисления высоты дива.

Вариант 1. Вычислять высоту дива при помощи JavaScript.

Вариант 2. Абсолютно позиционировать этот див, ячейке задать position:relative, чтобы позиционирование происходило относительно ячейки, а не всей страницы, и указать все координаты углов дива, т.е. top: 0; left: 0; bottom:0; right: 0;. Лиса это поймет.

Хотя вариант 2 на таблицах не проверял, но с блоками работает нормально.

Попробуйте, потом расскажите что получилось )

Searcher · June 11, 2009

не получается с таблицами так... интересная задачка, покопаюсь.

Sign In

iFrame или DIV на высоту ячейки таблицы

Question

dhtml

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Searcher

Link to comment

Share on other sites

dhtml

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

dhtml

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information