С таблицей проблема

Yahoo! · October 23, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	 <title>Типо сайт=)</title>

	 <style type="text/css">
	   html, body {height: 100%; width: 100%}
	   html {font-size:62.5%}
	   body {font: normal 1.6em Arial, Verdana, Helvetica, Calibri, Tahoma, sans_serif; line-height: 100%; color: #333; background: #fafafa}
	   html, body, table, tr, td {margin:0; padding:0}
	   td {vertical-align: top; border: 1px solid #abcdef}

	   table {table-layout: fixed;}

	   #maim {display:table-row-group; vertical-align:middle; height: 100%}
	   #header {height: 1px}
	   #content {}
	   #footer {height: 1px}
	 </style>
</head>
<body>
 <table id="maim" cellspacing="0">
  <tr id="header"><td>header</td></tr>
  <tr id="content"><td>content</td></tr>
  <tr id="footer"><td>footor</td></tr>
 </table>
</body>
</html>

Мне надо что бы средняя строка занима всё пространство, в то время как верхняя(шапка) растягивалась от заполнения контента и с нижней строкой тоже самое. Но при попытке задать этим двум строкам минимальную высоту в 1пиксель, они не слушаются, хотят что бы средней тоже задали. Но я же не знаю какой она должна быть высоты, 100% пробовал, так осёл её растягивает больше чем надо.

Яркий пример www.gogo.ru (на сайте как-то это проблема решена)

Justnewone · October 23, 2009

Копипаст =)

или попробуйте вместо height использовать min-height

Yahoo! · October 23, 2009

Не помогает, думал что тэг tbody поможет, но увы...

Yahoo! · October 24, 2009

Совсем нет решений?? Я в отчаянии...=(

psywalker · October 24, 2009

Совсем нет решений?? Я в отчаянии...=(

Дружок, я так не всматривался в твою задачу, скажи, это не то:

<!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>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;
		}

		html,
		body {
			height: 100%;
		}

		table {
			width: 100%;
			height: 100%;
			border-collapse: collapse;
		}

		td {
			width: 33%;
		}

		.red {
			background: red;
			height: expression(this.offsetParent.offsetParent.offsetHeight - 120);
		}

		.green {
			background: green;
		}

		.yellow {
			background: yellow;
		}

		.h {
			height: 60px;
			background: blue;
		}
	</style>
</head>
<body>

	<table>
		<tr>
			<td class="h">

			</td>
			<td class="h">

			</td>
			<td class="h">

			</td>
		</tr>
		<tr>
			<td class="red">
				111
			</td>
			<td class="green">
				222
			</td>
			<td class="yellow">
				333
			</td>
		</tr>
		<tr>
			<td class="h">

			</td>
			<td class="h">

			</td>
			<td class="h">

			</td>
		</tr>
	</table>

</body>
</html>

Yahoo! · October 24, 2009

Оно так и знал, что без экспрэшена не обойтись. Даже если у IE отключены скрипты он всё равно будет видеть его?

Хотя... нашёлся изъян, при заполнении шапки вся таблица начинает растягиваться и её ширина уже не 100% т.е. появляется скролл, а мне этого не надо. При заполнении футера такого не появляется. Влияет опять же экспрэшен)

Edited October 24, 2009 by Yahoo!

psywalker · October 24, 2009

Ещё как вариант я предложил бы каждой строке задать проценты: Тоесть верху 10%, низу тоже, а середине оставшиеся 80, тогда по-идее должно всё тянуться

Yahoo! · October 24, 2009

Нее, надо чтобы шапка и футер были фиксированными и взависимости от заполнения контента или увеличивания/уменьшения шрифта меняли высоту. А если так, я бы сюда и не задавал вопроса.

Sign In

С таблицей проблема

Question

Yahoo!

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

Justnewone

Link to comment

Share on other sites

Yahoo!

Link to comment

Share on other sites

Yahoo!

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Yahoo!

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Yahoo!

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information