Firefox, высота таблицы и размер содержимого

prichvm · February 10, 2010

Добрый день!

Есть таблица, в которой 1 строка произвольной высоты. Все остальные - фиксированные.

В ячейке этой строки находится дивка. У неё может быть произвольное содержимое и надо, чтобы появлялись полосы прокрутки.

Всё работает в ие6, опере, хроме.

Но фф просто растягивает таблицу так, чтоб уместить всю дивку в ней, полосы прокрутки появляются тлько если фиксировать её размер (а надо, чтоб она была на всю ячейку, т.к. у ячейки может быть произвольная высота).

по коду получается так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>test</title>
</head>
<body>
<div style="width: 600px; height: 400px; border: 1px solid red;">

<table 
	style="height: 100%; width: 100%; table-layout: fixed;"
	cellpadding="0" cellspacing="0" border="1">
	<colgroup>
		<col width="300">
		<col width="300">
	</colgroup>
	<tbody>
		<tr height="100px">
			<td> 
			</td>
			<td> 
			</td>
		</tr>
		<tr>
			<td> 
			</td>
			<td>
				<div style="height: 100%; overflow-y: auto; border: 1px solid blue;">
				qweqweqwe<br>qweqweqwe<br>qweqweqwe<br>qweqweqwe<br>qweqweqwe<br>qweqweqwe<br>qweqweqwe<br>
				qweqweqwe<br>qweqweqwe<br>qweqweqwe<br>qweqweqwe<br>qweqweqwe<br>qweqweqwe<br>qweqweqwe<br>
				</div>
			</td>
		</tr>
		<tr height="100px">
			<td> 
			</td>
			<td> 
			</td>
		</tr>
	</tbody>
</table>

</div>

</body>
</html>

может кто-нибудь сталкивался? что-нибудь подскажет?

Justnewone · February 10, 2010

<div style="height: 100%; overflow-y: auto; border: 1px solid blue;"> - ему не откуда считать высоту.

Учитывая, что общая высота таблицы height: 400px, не понятно вообще, о какой резине речь идет, просто пропишите фикс. размер. Или max-height для <div style="height: 100%; overflow-y: auto; border: 1px solid blue;">.

prichvm · February 10, 2010

Нет) общая высота таблицы - 100%. а наружняя дивка может менять размер. это сейчас он здесь задан - 400px. а фактически её высота может быть и любой другой (меняться через js). Потому и получается, что средняя строка будет свободно тянуться.

я не очень знаком с этой "математикой", по которой браузеры рисуют страницу, но если в 3х браузерах работает как надо, может и для четверртого есть лекарство?

Justnewone · February 10, 2010

Нет) общая высота таблицы - 100%. а наружняя дивка может менять размер. это сейчас он здесь задан - 400px. а фактически её высота может быть и любой другой (меняться через js). Потому и получается, что средняя строка будет свободно тянуться.
я не очень знаком с этой "математикой", по которой браузеры рисуют страницу, но если в 3х браузерах работает как надо, может и для четверртого есть лекарство?

работает как надо, но вопреки всякой логике. Меняйте JS-ом также высоту внутреннего дива.

prichvm · February 10, 2010

Почему вопреки логике? а есть логика в том, что фф растягивает таблицу (даже если ей задать фиксированный размер)? как раз логично было бы добавить в дивку полосы прокуртки, раз содержимое не вмещается.

менять высоту внутреннего дива - рассматривается как последний вариант. хотя и реализовано

Great Rash · February 10, 2010

Не знал, что <tr> можно задавать высоту...

У родителя (<td>) не задана высота, так что естественно, что диву не от чего брать 100%, тут ФФ абсолютно корректно себя ведет.

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

prichvm · February 10, 2010

ну для таблицы же фф может вычислить высоту? 400px. но всё равно растягивает её. это вряд ли корректно.

Great Rash · February 10, 2010

Нука где тут некорректное поведение?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 12px Tahoma, Arial, sans-serif;
		}

		.test {
			height: 400px;
			border: red 1px dashed;
		}

		table {
			width: 100%;
			height: 100%;
			border: green 3px groove;
		}

		table td {
			border: green 1px solid;
		}

		.head, .foot {
			height: 100px;
		}
	</style>
</head>

<body>

	<div id="test" class="test">
		<table>
			<tr>
				<td class="head">
					head
				</td>
			</tr>
			<tr>
				<td>
					text
				</td>
			</tr>
			<tr>
				<td class="foot">
					head
				</td>
			</tr>
		</table>
	</div>

</body>
</html>

prichvm · February 10, 2010

У Вас так:

            <tr>
                <td>
                    text
                </td>
            </tr>

у меня так:

		<tr>
			<td> 
			</td>
			<td>
				<div style="height: 100%; overflow-y: auto; border: 1px solid blue;">
				qweqweqwe<br>qweqweqwe<br>qweqweqwe<br>qweqweqwe<br>qweqweqwe<br>qweqweqwe<br>qweqweqwe<br>
				qweqweqwe<br>qweqweqwe<br>qweqweqwe<br>qweqweqwe<br>qweqweqwe<br>qweqweqwe<br>qweqweqwe<br>
				</div>
			</td>
		</tr>

вот здесь, содержимое в блоке растягивает и блок, и таблицу. никаких полос прокрутки.

Great Rash · February 10, 2010

Ну и правильно растягивает, как вы не поймете. У <td> не задана никакая высота, естественно что контент нично не ограничивает. Что не ясно то?

prichvm · February 10, 2010

Ограничивает внешний блок. В котором находится сама таблица. Ну т.е. по идее ни таблице, ни td уже некуда дальше расширяться. Потому поведение ие, оперы или хрома мне вполне понятно. В то время как фф все равно тянет таблицу и ячейку.

Edited February 10, 2010 by prichvm

Great Rash · February 10, 2010

И правильно делает в отличие от остальных браузеров имхо. Попробуйте сказать таблице table-layout: fixed;

Может поможет.

prichvm · February 10, 2010

В самом первом посте сказал ещё ))

Т.е. вы считаете, что он правильно делает, даже если у таблицы размер фиксированный (указана высота и ширина в px - в этом случае поведение его не меняется)? Как-то сомнительно.

Justnewone · February 10, 2010

В самом первом посте сказал ещё ))
Т.е. вы считаете, что он правильно делает, даже если у таблицы размер фиксированный (указана высота и ширина в px - в этом случае поведение его не меняется)? Как-то сомнительно.

Очень простой пример. Положите контент в ДИВ и скажите диву overflow:auto.

до того момента, когда не будет указана высота или ширина, прокрутка не появится. Причем не просто указана, а именно так, чтобы браузер смог ее откуда-то отсчитать.

prichvm · February 10, 2010

Очень простой пример. Положите контент в ДИВ и скажите диву overflow:auto.
до того момента, когда не будет указана высота или ширина, прокрутка не появится. Причем не просто указана, а именно так, чтобы браузер смог ее откуда-то отсчитать.

В Вашем примере див ни чем не ограничена. У меня - находится внутри таблицы, таблица ограничена. значит высоту ячейки тоже можно посчитать. с чем и справляются все браузеры кроме фф.

Justnewone · February 10, 2010

В Вашем примере див ни чем не ограничена. У меня - находится внутри таблицы, таблица ограничена. значит высоту ячейки тоже можно посчитать. с чем и справляются все браузеры кроме фф.

как не ограничен? ограничен, боди, например. а он в свою очередь html, смотрите в код.

prichvm · February 10, 2010

Ограничен в смысле размера (должен быть задан)

Sign In

Firefox, высота таблицы и размер содержимого

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information