Помогите реализовать структуру

zuldek · January 4, 2011

Вот не могу понять как правильно сделать. Есть таблица таблица

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

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

<!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" dir="ltr" lang="ru">
  <head>
	<title>123</title>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

  </head>

  <body>
  <table width="500px" border="1">
	  <tr>
	  <td height="40px" colspan="2"> </td>

	</tr>
	<tr>
	  <td width="300px" height="30px" bgcolor="#990000">ячейка фиксированной высоты, не тянется</td>
	  <td valign="top" rowspan="4"><p>текст, ячейка должна растягиваться по высоте</p>
	  <p>текст, должен тянутся.</p>
	  <p>текст, должен тянутся.</p>
	  <p>текст, должен тянутся.</p>
	  <p>текст, должен тянутся.</p>
	  <p>текст, должен тянутся.</p>
	  <p>текст, должен тянутся.</p>
	  <p>текст, должен тянутся.</p>
	  <p>текст, должен тянутся.</p>
	  <p>текст, должен тянутся.</p>
	  <p>текст, должен тянутся.</p>
	  <p> </p>
	  <p>текст, должен тянутся.</p>
	  <p>текст, должен тянутся.</p></td>
	</tr>
	<tr>
	  <td>ячейка должна рстягиваться по высоте</td>
	</tr>
	<tr>
	  <td height="30px" bgcolor="#999999">ячейка не должна тянутся по высоте</td>
	</tr>
	<tr>
	  <td height="40px" bgcolor="#336633">ячейка не должны тянутся п овысоте</td>
	</tr>
  </table>
</body>
</html>

Temiks · January 4, 2011

.

Edited January 4, 2011 by Temiks

Temiks · January 4, 2011

вот, сделал

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<style type="text/css" >
		html, body {
			margin: 0px;
			height: 100%;
			width: 100%;
			vertical-align: top;
			border: 0px;
			border-collapse: collapse;
}
.container {
	width: 1000px;
	height: 100%;
	background-color: gold;
	margin: 0 auto;

}
.header {
	height: 150px;
	background-color: red;
}
.logo {
	width: 200px;
	background-color: lavender;
}
.center {
background-color: violet;
}
.center-table {
	min-height: 100%;
	height: 100%;
	background-color: greenyellow;
	width: 100%;
}
.border-top, .border-bottom {
	height: 20px;
	background-color: #5488af;
}
.center-pic {
	background-color: #8fa09b;
	height: 350px;
}
.content {
	vertical-align: top;
}
.toolbar {
	width: 200px;
	background-color: antiquewhite;
	vertical-align: text-top
}
.footer {
	height: 70px;
	background-color: aqua;
}
	</style>
  </head>
  <body>
	  <table class="container" >
		  <tr>
			  <td class="header" >
				  Шапка
			  </td>
			  <td class="logo" >
				  Лого
			  </td>
		  </tr>
		  <tr>
			  <td valign="top" class="center" >
				  <table class="center-table" >
					  <tr>
						  <td class="border-top" valign="top" >
							  55%
						  </td>
					  </tr>
					  <tr>
						  <td class="center-pic" >
							  Картинка
						  </td>
					  </tr>
					  <tr>
						  <td class="border-bottom" >
							  55%
						  </td>
					  </tr>
					  <tr>
						  <td class="border-top" >
							  55%
						  </td>
					  </tr>
					  <tr>
						  <td class="content" height="100%" >
							  Контент Контент Контент Контент Контент Контент Контент Контент Контент
							   Контент Контент Контент Контент Контент Контент Контент Контент Контент
								Контент Контент Контент Контент Контент Контент Контент Контент Контент
								 Контент Контент Контент Контент Контент Контент Контент Контент Контент
								  Контент Контент Контент Контент Контент Контент Контент Контент Контент
								   Контент Контент Контент Контент Контент Контент Контент Контент Контент
									Контент Контент Контент Контент Контент Контент Контент Контент Контент
						  </td>
					  </tr>
					  <tr>
						  <td class="border-bottom" >
							  55%
						  </td>
					  </tr>
					  <tr>
						  <td class="footer">
							  Футер
						  </td>
					  </tr>
				  </table>
			  </td>
			  <td class="toolbar" >
				  <p>Сайтбар</p>
				  <p>Сайтбар</p>
				  <p>Сайтбар</p>
				  <p>Сайтбар</p>
				  <p>Сайтбар</p>
				  <p>Сайтбар</p>
				  <p>Сайтбар</p>
				  <p>Сайтбар</p>
				  <p>Сайтбар</p>
				  <p>Сайтбар</p>
				  <p>Сайтбар</p>
				  <p>Сайтбар</p>
				  <p>Сайтбар</p>
				  <p>Сайтбар</p>
				  <p>Сайтбар</p>
				  <p>Сайтбар</p>
				  <p>Сайтбар</p>
				  <p>Сайтбар</p>
			  </td>
		  </tr>

	  </table>
  </body>
</html>

Edited January 4, 2011 by Temiks

zuldek · January 4, 2011

Ты просто задал фиксированную высоту таблицы вложенной в ячейку. Это не работает если контент в сайдбаре больше этой высоты. Вот почему

Ну что, это же форум html-кодеров, ну неужели никто тут не знает ответа на такой, мне, наверно, простой вопрос с резиновой высотой элементов таблицы?((

Edited January 4, 2011 by zuldek

deadrash · January 4, 2011

Таблицы тут не любят

Temiks · January 4, 2011

deadrash помоги пжл, работает в Фф а в ие нет, подправил код

deadrash · January 4, 2011

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

Temiks · January 4, 2011

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

надеюсь

zuldek · January 4, 2011

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

IE не обязателен, в опере такие же ошибки.

Temiks · January 4, 2011

zuldek высота главной таблицы фикс или резина?

zuldek · January 4, 2011

zuldek высота главной таблицы фикс или резина?

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

deadrash · January 4, 2011

Можно например вложить в левую часть ещё таблицу вместо строк.

<!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" dir="ltr" lang="ru"><head>
	<title>123</title>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

  </head>

  <body>
  <table width="500px" border="1">
  <tbody><tr>
	  <td colspan="2">awd</td>
  </tr>
   <tr>
   	<td>
   		<table>
			<tbody style="height: 100%; "><tr><td style="height: 40px; ">aa</td></tr>
			<tr><td style="height: 40px; ">aa</td></tr>
			<tr><td>wadawd wadawdaw wadawd wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw </td></tr>
			<tr><td style="height: 40px; ">aa</td></tr>
			<tr style="height: 40px; "><td>aa</td></tr>
		</tbody></table>
   	</td>
   	<td style="width: 200px; ">dawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw d</td>
   </tr>
  </tbody></table>

</body></html>

Temiks · January 4, 2011

deadrash а зачем сайдбар я уже сделал, остался только нижний контент, ведь так zuldek ?

+ сайдбар уже и так тянется

Edited January 4, 2011 by Temiks

zuldek · January 4, 2011

Добил немного контента в в сайдбар (из кода который предложили deadrash) и таблица в левой колонке ездит по ячейке вот так значит не то что-то((

<!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" dir="ltr" lang="ru"><head>
	<title>123</title>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

  </head>

  <body>
  <table width="500px" border="1">
  <tbody><tr>
	  <td colspan="2">awd</td>
  </tr>
   <tr>
	   <td>
		   <table border="1">
			<tbody style="height: 100%; "><tr><td bgcolor="#00CC00" style="height: 40px; ">aa</td></tr>
			<tr><td  bgcolor="#FF6600" style="height: 40px; ">aa</td></tr>
			<tr><td>wadawd wadawdaw wadawd wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw </td></tr>
			<tr><td bgcolor="#0000FF" style="height: 40px; ">aa</td></tr>
			<tr bgcolor="#CC66FF" style="height: 40px; "><td>aa</td></tr>
		</tbody></table>
	   </td>
	   <td bgcolor="#FFFF66" style="width: 200px; ">dawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw a  </td>
   </tr>
  </tbody></table>

</body></html>

Edited January 4, 2011 by zuldek

Temiks · January 4, 2011

zuldek у меня сайдбар работает на отлично, можешь забить его контентом с ног до головы и все будет ок, проблема осталось только с контентом, в инете не пробивал искать?

я говорю про фф

zuldek · January 4, 2011

Добил немного контента в в сайдбар (из кода который предложили deadrash) и таблица в левой колонке ездит по ячейке вот так

значит не то что-то(( Нужно чтобы вложенная таблица растянулась на всю высоту ячейки без пустого пространтва

<!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" dir="ltr" lang="ru"><head>
	<title>123</title>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

  </head>

  <body>
  <table width="500px" border="1">
  <tbody><tr>
	  <td colspan="2">awd</td>
  </tr>
   <tr>
	   <td>
		   <table border="1">
			<tbody style="height: 100%; "><tr><td bgcolor="#00CC00" style="height: 40px; ">aa</td></tr>
			<tr><td  bgcolor="#FF6600" style="height: 40px; ">aa</td></tr>
			<tr><td>wadawd wadawdaw wadawd wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw wadawd wadawdaw </td></tr>
			<tr><td bgcolor="#0000FF" style="height: 40px; ">aa</td></tr>
			<tr bgcolor="#CC66FF" style="height: 40px; "><td>aa</td></tr>
		</tbody></table>
	   </td>
	   <td bgcolor="#FFFF66" style="width: 200px; ">dawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw ddawd awd awdawdawda wdaw a  </td>
   </tr>
  </tbody></table>

</body></html>

Вот как бы бы хотелось но так не получается сделать

zuldek · January 4, 2011

Скажите, а если добавить внизу ещё одну ячейку?

пусть она например будет высотой в 1 пиксель, но будет объединять обе колонки, это както спасёт положение?

Temiks · January 4, 2011

Скажите, а если добавить внизу ещё одну ячейку?
пусть она например будет высотой в 1 пиксель, но будет объединять обе колонки, это както спасёт положение?

скорее нет чем да

Edited January 4, 2011 by Temiks

zuldek · January 5, 2011

Заройте тему.

средствами настоящего HTML4 задача не решаема.

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

В дальнейшем вероятно буду писать решение на JS для этой проблемы.

Sign In

Помогите реализовать структуру

Question

Link to comment

Share on other sites

18 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

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information