XHTML и 100%-ная высота таблиц.

maleficmax · October 26, 2007

Дублирую тему с раздела Таблицы, вдруг здесь помощи найду...

Собственно, я полагаю вопрос многим знаком, но я таки обьясню... Существует эта страничка, которая в HTML тянется в высоту за счет средней ячейки (ряда). Однако, на станице я применяю меню, которое требует XHTML. И тут начинаются проблемы. Ячейка НЕ ТЯНЕТСЯ в XHTML!!!!!! И никак я не могу этому помочь! ((( По крайней мере пока что...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <title>
XXXXXXXXXX
 </title>
 <meta http-equiv="Content-Type" content="text/html; charset=cp1251" />

<style type="text/css">
body { 
 height: 100%; 
 margin: 0 0 0 0; }
.stretch { 
 height: 100%; 
 width: 100%; 
 border-collapse: collapse;}
.stretch tr td {
 border: 1px solid #000;}

</style>

</head>


<body>

<table class="stretch">
 <tr height="50">
 <td width="20%"></td>
 <td width="60%"></td>
 <td width="20%"></td>
 </tr>
 <tr>
 <td> </td>
 <td>I WANT TO STRETCH!!!!!!!!!!!!</td>
 <td> </td>
 </tr>
 <tr height="50">
 <td> </td>
 <td> </td>
 <td> </td>
 </tr>
</table>

</body>


</HTML>

Если кому-то известен ответ, произнесите его плиз!

Или хоть обматерите меня, идиота)))

klierik · October 26, 2007

html, body {
 height: 100%;
 margin: 0;
 padding:0;
}

ps:

</HTML>

рекомендуемо писать название тегов в нижнем регистре.

zeroonenine · October 29, 2007

Вопрос аналогичный вроде - как сделать чтобы таблица внутри ячейки другой таблицы тянулась по 100% высоте ячейки?

код такой:

<body> 
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> 
<tr> 
<td><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> 
<tr> 
<td align="left" valign="top"> </td> 
</tr> 
</table></td> 
</tr> 
</table> 
</body>

вариант сделать align первой таблицы как top не предлагать - это всего-лишь пример, в оригинале там по-другому вс? реализовано.

В ячейки таблицы инклюдятся менюшки которые находятся в отдельных таблицах+ в них часть дизайна страницы. Получается так что он разваливается без стабильной высоты страницы...

Спасибо. Буду очень благодарен если поможите.

далее привожу код страницы с которой проблемы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type="text/javascript" src="flashobject.js"></script><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>GlobalRidePromotion</title>
</head>

<LINK rel="stylesheet" type="text/css" href="styles.css">
<body height="100%" padding="0" bgcolor="#FFFFFF" text="#000000" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
	<td valign="top">



	<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
	  <tr>
		<td width="200" height="100%" valign="top">


					  <!--	left navtable -->

		<table width="200" height="100%" border="0" cellpadding="0" cellspacing="0">
			<tr>
			  <td><img src="images/gr02.gif" width="200" height="158" /></td>
			</tr>
			<tr>
			  <td valign="bottom">
							<table width="100%" border="0" cellspacing="0" cellpadding="0">
				  <tr>
					<td width="10" valign="bottom" style="background-image:url(images/gr_06.gif); background-repeat:repeat-y; background-position:left top;"><img src="images/gr_06_01.gif" align="bottom" /></td>
					<td width="180" height="100%" valign="top" style="background:url(images/gr14-17.gif); background-repeat:no-repeat; background-position:bottom;">

					<div id="colorarrow_id" >ja menushko </div>


























					<span class="newstitle">погода:</span>

					<a href='http://www.gismeteo.ru/towns/11120.htm'><img src='http://informer.gismeteo.ru/11120-10.GIF' border="0" /></a>



					<a href='http://www.gismeteo.ru/towns/11310.htm'><img src='http://informer.gismeteo.ru/11310-10.GIF' border="0" /></a>

					<script type="text/javascript">
var fo = new FlashObject("menu.swf","colorarrow","180","150","6","#000000");
	fo.addParam("menu","false");
	fo.addParam("quality","best");
	fo.addParam("scale","noscale");
	fo.addParam("salign","LT");
	fo.addParam("wmode", "transparent");
	fo.write("colorarrow_id");
</script>	 

</td>
					<td width="10" valign="bottom" style="background-image:url(images/gr_08.gif); background-position:left bottom; background-repeat:no-repeat"></td>
				  </tr>
			  </table>
		  </td>
			</tr>
</table>

	 	  <!--	left navtable -->		

</td>
		<td width="100%" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
			<tr>

			  <td height="58" ><img src="images/gr01.gif" width="544" height="58" /></td>
			</tr>
			<tr>
			  <td height="80">



			  <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
	<td> </td>
  </tr>
</table>



</td>
			</tr>
			<tr>
			  <td height="10"> </td>
			</tr>
			<tr>
			  <td style="background-image:url(images/gr_09.gif); bgcolor:#FFFFFF; bgvalign:bottom; background-position: 0% 100%; background-repeat:no-repeat"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
				<tr>
				  <td><p>Анонс</p>
					<p>Ты хочешь октатать за 14 дней 10 альпийских курортов более чем с сотней российских райдеров, зажигать каждый вечер, стать неотъемлемой частью огромной компании?

					  У тебя есть такая возможность!

					  Gr-Promotion представляет невероятный тур в австрийские Альпы.

					  Более 100 человек-участников, проживание в 2х этажных домах, закрытый бассейн в 50 метрах от твоего дома, возможность откатать на 10 лучших австрийских, и не только, курортах, 2х дневное путешествие в Амстердам, slope-style контест с ценными призами в Инсбруке, ежедневный отжиг.

					</p>
					<p> </p>
					<p>История</p>
					<p>GR-promo начало сво? существование в октябре 2006го, когда 1 человек решил увезти 30 друзей и знакомых покататься в Австрии, вс? было сделано весело и спонтанно, 29 января наш самол?т приземлился в мюнхенском аэропорту, аренда машин, карта Европы, курс на Инсбрук, GPS включ?н. 2 часа и мы на месте, завораживающие силуэты Альп на трассе Мюнхен-Инсбрук, Jack Daniels и хорошая компания, утро, завтрак, карта Европы, едем на Штубайский ледник, отличное катание, веселье, назад, в Инсбрук, BBQ на участке, закат, сауна, веселье в бассейне. Каждый день проходил одинаково весело, но одинаково разно, и это того стоило!</p>
					<p>В этом году мы готовы предоставить ещ? больше альпийских курортов, больше драйва, и больше участников, возможно эта поездка станет лучшей в твоей жизни! Party, джибб-контест, Друзья, Австрия, Ты - 26.01.08-09.02.08.

					</p>
					<p>Варианты</p>
					<p>Какой бы вид отдыха ты ни предпочитал, у нас найдется, что тебе предложить!</p>
					<p>Первый вариант: Каждый день ? новый склон!

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

					  Каждый вечер после катания тебя будет ждать аццкий отжиг в огромной компании (более 60 человек живущих в двух шагах), тебя ждут вечеринки в бассейне и BBQ-party!

					  В данное предложение входит:

					  - проживание в аппартаментах в течение 14-ти дней

					  - перелет Москва-Мюнхен-Москва

					  - трансфер Мюнхен-Тельфс-Мюнхен

					  - оформление австрийской визы

					  Стоимость предложения: 1100 euro.

					  Дополнительные расходы:

					  - аренда машины (~ 200 euro с человека)

					  www.europcar.com

					  www.avis.com

					  www.hertz.com

					  www.nationalcar.com

					  - скипасс (~300 euro)

					  Тут ссылки на курорты.

					  - питание</p>
					<p>Второй вариант: Склон под боком.

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

					  Мы можем предоставить тебе проживание рядом с ледником Stubaital ( Fulpmes, Neustift) или с ледником Hintertux (Mayrhofen).

					  В данное предложение входит:

					  - проживание в аппартаментах в течение 14-ти дней

					  - перелет Москва-Мюнхен-Москва

					  - трансфер аэропорт-аппартаменты-аэропорт

					  - оформление австрийской визы

					  Стоимость предложения: 1300 euro.

					  Дополнительные расходы:

					  - скипасс (~300 euro)

					  www.mayrhofen.ru

					  www.stubai.at

					  - питание</p></td>
				  <td width="200">




<table width="200" height="100%" border="0" cellpadding="0" cellspacing="0">
					<tr>
					  <td valign="top"><span class="newstitle">последние темы форума: </span>

						<iframe src="http://insnow.ru/forum/shoutbox_view.php?start=0" width=200 height=300 marginwidth=0 marginheight=3 scrolling=no frameborder=0></iframe></td>
					</tr>
					<tr>
					  <td align="right" valign="bottom" height="84"><img src="images/gr_09_1.gif" width="133" height="84"></td>
					</tr>
				  </table>


				  </td>
				</tr>
			  </table></td>
			</tr>
			<tr>
			  <td height="10"><img src="images/gr_18.gif" alt="" width="728" height="10" align="left"> <img src="images/gr_18_1.gif" width="170" height="10" align="right" /></td>
			</tr>
			<tr>
			  <td height="120">



			  <table width="100%" height="120" border="0" cellpadding="0" cellspacing="0">
				  <tr>
					<td width="260"><img src="images/gr_19.gif" width="260" height="120" /></td>
					<td style="background:url(images/gr_23_1.gif); background-repeat:repeat-x; background-position:bottom"> </td>
					<td width="368" align="right"><table width="468" border="0" cellspacing="0" cellpadding="0">
						<tr>
						  <td><img src="ban/snowboard1.gif" width="468" height="60" longdesc="http://snowboard.ru" /></td>
						</tr>
						<tr>
						  <td><img src="images/gr_21.gif" width="468" height="60" alt="" /></td>
						</tr>
					</table></td>
				  </tr>
			  </table>


			  </td>
			</tr>
		</table></td>
	  </tr>
	</table></td>
	<td width="10" valign="bottom" style="background:url(images/gr_24.gif); background-position:bottom; background-repeat:repeat-y"><img src="images/gr_04.gif" width="10" height="220" /></td>
  </tr>
</table>
</body>
</html>

и файл styles.css

html, body {
	height: 100%;
	margin: 0;
	padding:0;
}

.newstitle {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
}

Dimitry Wolotko · October 30, 2007

В Проблемы верстки.

klierik · October 30, 2007

1. я не очень понял сути проблемы.

2. рекомендую все переписать на дивах.

zeroonenine · October 30, 2007

таблица, находящаяся внутри ячейки основной таблицы, которая тянется на всю высоту экрана, не хочет тянуться по высоте ячейки. table width="100%" не работает. в ч?м может быть проблема?

klierik · October 30, 2007

честно. я пытался понять ваш код, но это ни к чему не привело.

перепишите все в стилях и скажите какая таблица не тянется в какой ячейке

и еще. для начала пофиксите все баги, выдаваемые валидатором: http://validator.w3.org/

zeroonenine · October 30, 2007

вроде как альтернативный ответ

remus_nox · November 3, 2007

Дело в том что в стандарте XHTML 1.0 у таблицы нет свойства height. У меня такая же проблема. Нужно растянуть таблицу на все окно чтобы все было равномерно, решения пока не нашел. Если кто нашел - пишите.

Inn · February 29, 2008

Дело в том что в стандарте XHTML 1.0 у таблицы нет свойства height. У меня такая же проблема. Нужно растянуть таблицу на все окно чтобы все было равномерно, решения пока не нашел. Если кто нашел - пишите.

Вот этот вариант годится? Работает в IE7 и Fx:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
*{ margin:0; padding:0;}
html,body{ height:100%; background:#fff;}
table { background-color:#ccc; width:90%; height:100%;}
</style>
</head>
<body>
<table>
 <tr>
 <td>Test</td>
 </tr>
</table>
</body>
</html>

Mordraug · February 29, 2008

может вам это надо?

<!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>DIV 100% width 100% height</title>
 <style type="text/css">
 /* убираем отступы и устанавливаем высоту html-body 100%*/
 html, body {
 padding: 0;
 margin: 0;
 height: 100%;
 }

 /* устанавливаем высоту и ширину контейнера 100%, для Opera и FF */
 #container {
 min-width: 100%;
 min-height: 100%;
 background:yellow;
 }

 /* воркараунд, данное объявление специально для IE6 */
 * html #container {
 width: 100%;
 height: 100%;
 }
 </style>
 </head>
 <body>

 <div id="container">
 100% width 100% height container
 </div>

 </body>
</html>

Mordraug · February 29, 2008

вот вариант с таблицей (работает в IE6/7, Opera9, FF2, Mozilla, Safari):

<!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>Table 100% width 100% height</title>
 <style type="text/css">
 /* убираем отступы и устанавливаем высоту html и body 100%*/
 html, body {
 padding: 0;
 margin: 0;
 height: 100%;
 }

 /* устанавливаем высоту и ширину контейнера 100% */
 #container {
 width:100%; /* для Opera, FF, Mozilla, Safari */
 min-width: 100%;
 height:100%; /* для FF , Mozilla, Safari */
 min-height: 100%;
 background:yellow;

 }

 /* для IE */
 * html #container {
 width: 100%;
 height: 100%;
 }

 </style>
 </head>
 <body>

 <table id="container">
 <tr>
 <td>
 100% width 100% height table
 </td>
 </tr>
 </table>

 </body>
</html>

Symbios · May 6, 2008

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

Тестил в IE FF и Опере, как можно догадаться самый капризный оказался IE, у него левая ячека куда то за страницу лезит, почему?

http://webtech.zx6.ru/test/webtech-at-ist.ru-test.html

Sign In

XHTML и 100%-ная высота таблиц.

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