Высота ячейки 100% в IE - действительно решения не существует?

RedRat · June 2, 2008

Проблема очень простая и несколько раз уже обсуждалась на форуме (тут, например), но решения так никто и не нашёл.

Дано: простейший макет - таблица из трёх строк (хидер, контент и футер), растянутая на 100% по высоте. Хидер и футер имеют фиксированную высоту, контент занимает всё остальное пространство. В quirks mode это замечательно работает, а вот при добавлении любого валидного доктайпа начинаются проблемы: в Опере и ФФ всё показывается нормально, а в IE6 вертикальные размеры ячеек игнорируются, и в итоге (при пустом содержимом) все три ячейки занимают по трети высоты таблицы.

Пример кода:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Table Test</title>
  <style type="text/css">

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

	#main {
		width: 80%;
		min-width: 80%;
		height: 100%;
		min-height: 100%;
		background: yellow;
		margin: 0 auto;
		border-collapse: collapse;
		border: 1px solid black;
	}

	* html #main {
		width: 80%;
		height: 100%;
	}

	#head, #foot {
		height: 2em;
		border: 1px solid black;
	}

  </style>
</head>

<body>

<table id="main">

  <tr><td id="head">
	<p>Header</p>
  </td></tr>

  <tr><td id="center">
	<p>Content</p>
  </td></tr>

  <tr><td id="foot">
	<p>Footer</p>
  </td></tr>

</table>

</body>
</html>

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

Edited October 22, 2009 by RedRat

ZooY · June 3, 2008

Нет, решения не существует. Существуют всякие обходные пути. Самый простой, которые приходит в голову такой:

<table>
<tr><td>

<table>
<tr><td id="head"><p>Header</p></td></tr>
<tr><td id="center"><p>Content</p></td></tr>
</table>

</td></tr>
<tr><td valign="bottom">

<table><tr><td id="foot"><p>Footer</p></td></tr></table>

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

Ты делаешь общую таблицу, в торой Header и Content прижимаются к верху, а Footer к низу.

А вообще пользуй блочную верстку и таких проблем не будет

RedRat · June 3, 2008

Ты делаешь общую таблицу, в торой Header и Content прижимаются к верху, а Footer к низу.

К сожалению, в таком варианте контент не растянуть до футера, а в моём случае - это критично.

А вообще пользуй блочную верстку и таких проблем не будет

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

P.S. Вот же ж блин! Придётся отказываться от хорошего макета и придумывать что-то другое. :-(

Edited October 22, 2009 by RedRat

Postal · June 3, 2008

смотря какой бекграунд, покажи макет.

RedRat · June 3, 2008

смотря какой бекграунд, покажи макет.

Бэкграунда никакого нет, просто серый фон. Макет примерно такой, просто хочу его валидным доктайпом сделать, а то в qurks mode оформление в разных браузерах плывёт.

Edited October 22, 2009 by RedRat

ZoNT · June 3, 2008

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

Так что "валидный доктайп" - только для нормальных браузеров...

ZooY · June 3, 2008

смотря какой бекграунд, покажи макет.
Бэкграунда никакого нет, просто серый фон. Макет примерно такой, просто хочу его валидным доктайпом сделать, а то в qurks mode оформление в разных браузерах плыв?т.

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

RedRat · June 3, 2008

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

Ну, какие-то стандарты при валидном доктайпе он всё-же должен поддерживать. Осталось только выяснить - какие... :-/

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

Да, такой вариант я уже обдумывал. Не хотелось только с графикой связываться - придётся привязываться к пикселям, а не к em, да и в случае "поехавшей" разметки эффект будет некрасивее. Так что попробую пока с помощью вложенных таблиц реализовать, а там, видимо, придётся на блоки переходить.

P.S. Если честно, такого "западла" я от фирмы Майкрософт не ожидал! То, что в qurks mode ИЕ рендерит, как бог на душу положит - это ожидаемо было, но что в стандартном режиме у него ТАКИЕ косяки вылезут - для меня стало полной неожиданностью!

Вот и верь после этого людям... :-/

Edited October 22, 2009 by RedRat

ZoNT · June 3, 2008

Поддержку стандартов Майкрософт (официально), да и то неполную объявил начиная с 8-го осла...

Postal · June 3, 2008

а если так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Table Test</title>
  <style type="text/css">

	html, body {
		height: 100%;
		margin: 0;
		padding: 0;
		text-align:center;
	}
	.main {
		border-collapse:collapse;
		width:80%;
		height:100%;
		margin:0 auto;
	}
	td {
		padding:0;
		background-color:yellow;
		vertical-align:top;
		text-align:left;
	}
	td.head_content {
		padding-bottom:100px;
	}
	.header {
		border-top:1px solid black;
	}

	.content {
		border-top:1px solid black;
	}
	.footer {
		height:100px;
		text-align:left;
		width:80%;
		margin:0 auto;
		margin-top:-100px;
		border-top:1px solid black;
		background-color:yellow;
	}

  </style>
</head>

<body>

<table class="main">
	<tr>
		<td class="head_content">
			<div class="header">
				<p>Header</p>
			</div>
			<div class="content">
				<p>До последнего времени я прекрасно обходился без собственного сайта, хотя домен для него был зарегистрирован ещ? три года назад. Однако, когда объ?м готового к выкладыванию контента перевалил за пару гигов, волей-неволей пришлось заняться упорядочиванием информации. И тут оказалось, что 15-летний опыт сисадминства нисколько не помогает в рисовании страничек...</p>

<p>Наверное, вы уже заметили, что чувство прекрасного у меня напрочь отсутствует. Например, я так и не сумел выбрать цвета для оформления этой странички, после чего подумал: "Какого ч?рта?!" ? и решил обойтись вообще без цветов.</p>

<p>В итоге, получился такой вот серый во всех отношениях сайт...;-)</p>

<p>P.S. Кстати, дизайнерам и людям со слабой психикой я бы рекомендовал не заглядывать внутрь кода. Не то, чтобы там было совсем уж страшно, но... В общем, я вас предупредил!</p>
<p>P.S. Кстати, дизайнерам и людям со слабой психикой я бы рекомендовал не заглядывать внутрь кода. Не то, чтобы там было совсем уж страшно, но... В общем, я вас предупредил!</p>
<p>P.S. Кстати, дизайнерам и людям со слабой психикой я бы рекомендовал не заглядывать внутрь кода. Не то, чтобы там было совсем уж страшно, но... В общем, я вас предупредил!</p>
<p>P.S. Кстати, дизайнерам и людям со слабой психикой я бы рекомендовал не заглядывать внутрь кода. Не то, чтобы там было совсем уж страшно, но... В общем, я вас предупредил!</p>
<p>P.S. Кстати, дизайнерам и людям со слабой психикой я бы рекомендовал не заглядывать внутрь кода. Не то, чтобы там было совсем уж страшно, но... В общем, я вас предупредил!</p>
			</div>
		</td>
	</tr>
</table>
<div class="footer">
	Footer
</div>
</body>
</html>

RedRat · June 4, 2008

а если так:

Ага, хороший вариант, только та же беда: div #content не растянуть до футера. Впрочем, эту проблему можно решить используя фоновое изображение. А высоту футера задать не в пикселях, а в em - тогда получится динамически её менять в зависимости от размера шрифта (у меня подруга именно так всё и смотрит).

В общем, спасибо за вариант! :-)

Edited October 22, 2009 by RedRat

Sign In

Высота ячейки 100% в IE - действительно решения не существует?

Question

Link to comment

Share on other sites

10 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

Обсуждения

Important Information