Растянуть div по высоте ячейки таблицы

PCSpeaker · July 30, 2009

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<style type="text/css">
	.myclass {
		height: 100%;
		width: 100%;
		background: #000000;
	}
</style>
<table>
<tr>
	<td valign="top" bgcolor="#00FF00">
	aaa<br><br><br>aaa
	</td>
	<td valign="top" bgcolor="#FF0000">
		<div class="myclass">mydiv</div>
	</td>
</tr>
</html>

Пока не выставил HTML 4.01 Transitional проблем с этим не было, но хотелось сделать так, чтобы работало в этом стандарте.

Задача - растянуть div под ячейку td в высоту.

Перепробовал много вариантов, в том числе вовсе отказаться от таблицы, используя методы колонок одинаковой высоты, но в них (в том числе вот в этом методе) меня постигла та же проблема. Колонки создаются, а дивы внутри них под них не растягиваются. А мне очень надо, так как ими у меня образуются уголки.

Помогите пожалуйста.

Great Rash · July 30, 2009

Див растянется по высоте родителя только если у родителя задана высота. Иначе никак. Юзайте яваскрипт, а еще лучше переверстайте по человечески без извращений.

PCSpeaker · July 30, 2009

А в чем именно извращение?

У меня довольно обыденная ситуация. Есть 2 колонки в которых по 4 дива (каждый из которых делает угол). Соответственно чтобы сделать нижний угол div должен принять родительскую высоту. А если эта высота меняется в зависимости от содержимого сайта, то как быть без javascript непонятно. Без стандарта просто ставлю высоту 100% всем ячейкам и таблице. Со стандартом же этот ход не проходит. Я сегодня уже часов 7 убил на всё это дело, переверстывая разными способами колонки одинаковой высоты. Так что готов даже с нуля переверстать, если вы подкините идею как это сделать по человечески.

Edited July 30, 2009 by PCSpeaker

rus · July 31, 2009

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
	.myclass {
		height: 100%;
		width: 100%;
		background: #00FF00;
	}
	html, body {
	height: 100%;
	width: 100%;
	}
	.myclass td {
	border:#ffffff solid 1px;
	vertical-align:top;
	height: 100%;
	}
	.myclass td div {
	border:#000000 solid 1px;
	height: 100%;
	}
</style>
</head>
<body>
<table class="myclass">
<tr>
<td>
<div>mydiv</div>
</td>
<td>
<div>mydiv</div>
</td>
</tr>
</table>
</body>
</html>

Будь внимательней и читай маны и про стандарты!

Edited July 31, 2009 by rus

Justnewone · July 31, 2009

не получится без JS никак. Я делал следующее, после таблицы размещал див с нижними уголками и натягивал отр. маргином наверх.

PCSpeaker · August 1, 2009

Будь внимательней и читай маны и про стандарты!

А если мне не нужно чтобы таблица была во весь экран, а растягивалась по мере поступления текста?

К примеру такой вариант (убрал высоту у html и body) в IE уже не работает.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
	.myclass {
		height: 100%;
		width: 100%;
		background: #00FF00;
	}
	html, body {

	}
	.myclass td {
	border:#ffffff solid 1px;
	vertical-align:top;
	height: 100%;
	}
	.myclass td div {
	border:#000000 solid 1px;
	height: 100%;
	}
</style>
</head>
<body>
<table class="myclass">
<tr>
<td>
<div>mydiv<br><br>asdsad</div>
</td>
<td>
<div>mydiv</div>
</td>
</tr>
</table>
</body>
</html>

rus · August 3, 2009

В 7-ой версии ИЕ все работает, а под остальные версии я уже не верстаю.

Edited August 3, 2009 by rus

psywalker · August 3, 2009

rus

В 7-ой версии ИЕ все работает, а под остальные версии я уже не верстаю.

А почему Рустамыч? Ведь ИЕ6 ещё далеко не в ауте?

rus · August 3, 2009

А почему Рустамыч? Ведь ИЕ6 ещё далеко не в ауте?

Макс, для других может и нет, но для меня - да!

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

Типа: ИЕ - на помойку!!! (как девиз)

psywalker · August 3, 2009

Макс, для других может и нет, но для меня - да!
И я прекрасно понимаю, что делая сайт для обширной аудитории, я как разработчик должен учитывать то что у многих еще пользователей стоит этот горе-браузер, но тем не менее хоть один из немногих, но мой протест ему.
Типа: ИЕ - на помойку!!! (как девиз) biggrin.gif

Ээхх, вот думали бы так все заказчики

s0rr0w · August 3, 2009

Ээхх, вот думали бы так все заказчики

Пока кодеры не будут выставлять цену за поддержку ИЕ6 в полтора раза больше, чем без оной, до тех пор заказчики будут требовать поддержку ИЕ6.

Разговор идет примерно такой

- Нужна поддержка ИЕ6+, ФФ 1.0+, Опера 7+, Гугль Хрень 1.0+, Сафари 1.0+

- Коэффициент умножения за

* IE6 - 1.5

* ФФ1 - 1.2

* ФФ2 - 1.1

* Опера 7 - 1.3

* Опера 8 - 1.2

* Опера 9.27 - 1.1

* Сафари 1.0 - 1.3

* Сафари 2.0 - 1.1

- Не, давайте навреное только современные браузеры оставим, про остальные подумаем.

tolik89u · November 16, 2011

Пока кодеры не будут выставлять цену за поддержку ИЕ6 в полтора раза больше, чем без оной, до тех пор заказчики будут требовать поддержку ИЕ6.
Разговор идет примерно такой
- Нужна поддержка ИЕ6+, ФФ 1.0+, Опера 7+, Гугль Хрень 1.0+, Сафари 1.0+
- Коэффициент умножения за
* IE6 - 1.5
* ФФ1 - 1.2
* ФФ2 - 1.1
* Опера 7 - 1.3
* Опера 8 - 1.2
* Опера 9.27 - 1.1
* Сафари 1.0 - 1.3
* Сафари 2.0 - 1.1
- Не, давайте навреное только современные браузеры оставим, про остальные подумаем.

Красиво! Мне нравится! Надо будет подумать над этим. Только интересно, сильно ли снижается поток клиентов от установления условий подобного рода?

Edited November 16, 2011 by tolik89u

Justnewone · November 16, 2011

Пока кодеры не будут выставлять цену за поддержку ИЕ6 в полтора раза больше, чем без оной, до тех пор заказчики будут требовать поддержку ИЕ6.
Разговор идет примерно такой
- Нужна поддержка ИЕ6+, ФФ 1.0+, Опера 7+, Гугль Хрень 1.0+, Сафари 1.0+
- Коэффициент умножения за
* IE6 - 1.5
* ФФ1 - 1.2
* ФФ2 - 1.1
* Опера 7 - 1.3
* Опера 8 - 1.2
* Опера 9.27 - 1.1
* Сафари 1.0 - 1.3
* Сафари 2.0 - 1.1
- Не, давайте навреное только современные браузеры оставим, про остальные подумаем.
Красиво! Мне нравится! Надо будет подумать над этим. Только интересно, сильно ли снижается поток клиентов от установления условий подобного рода?

Эх, Толик, Вы на дату смотрите? Или так хотелось умное написать, что обо всем забыли?

Sign In

Растянуть div по высоте ячейки таблицы

Question

Link to comment

Share on other sites

12 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

Join the conversation

Обсуждения

Important Information