Div или Table Height=100%

paulik · May 18, 2010

Есть простая страница - колонка посередине, слева background div, справа backround div (оба на всю вышину). То есть макет элементарнейший.

Условия:

1) doctype transitional (с ссылкой на документацию)

2) кроссбраузерность.

на все таги вешаем как положено height:100%, на html,body и контентные.

Теперь траблы:

или надо выкидывать doctype или IE.

Собственно, что таблица, что div-ы с height:100% ведут себя точно также, разницы нет в чем верстать. Забудем по причине работоспособности о других браузерах кроме ИЕ.

Все вытягивается нормально до момента когда длинна контента не превышает вышины ока браузера. Как только появляется scroll, то вышина diva остается равной вышине окна а не реальной страницы. (Нафига нужен height 100% если это height окна а не документа??)

код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-200000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>proba</title>
	<style>
		html,body {height:100%; width:100%;}
		body {margin:0; padding:0;}
		#allpage {width:100%; height:100%; border:0;}
		#left,#content,#right {float:left; height:100%; border:3px solid #ff0000;}

	</style>
</head>

<body>
<div id="allpage">

<div id="left">aaa</div>
<div id="content">bbb</div>
<div id="right">ccc</div>

</div>
</body>
</html>

все прекрасно пока в id="content" не сунете для IE 100 раз bbb<br>bbb<br>

с таблцей аналогично:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-200000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>proba</title>
</head>
<body style="height:100%; margin:0; padding:0;">
<table border="1" style="height:100%"><tr>
	<td style="height:100%">
	<table border="1" style="height:100%">
		<tr><td>asdasd1</td></tr>
		<tr><td>asdasd2</td></tr>
	</table>
	</td>
	<td style="height:100%">sdsdsd<br>sdsdsd<br>... povtorite 100 raz...</td>
</tr>
</table>
</body>

описание стилем или height="100" неважно ибо за пределами обуждения спецификации doctype.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

решает проблему, на как сказал это невыполнение условия, и нет линка на документацию спецификации.

всякие fixed + absolute тут не причем и проблемы не решат.

Какие нить идеи? У меня башка кипит, это же простейший макет самого распостраненного дизайна.

Searcher · May 18, 2010

Есть высота и ширина, остальные ваши термины как-то не совсем понятны...

Вообще-то в нормальных броузерах есть min-height: 100%; при превышении контентом этой высоты элемент растягивается.

В ИЕ до 7 версии его заменяет обычный height:100%; Не понял что там у вас за проблема в ИЕ, блок как раз растягивается. Возможно, вы имели ввиду другие блоки, которые, как вы хотите, чтобы тянулись за тем, который переполняется контентом?

ИЕ надо выкидывать - согласен :blink:

Попробуйте с min-height, потом напишите что не получается.

paulik · May 18, 2010

вот как это должно работать:

линк

попробуйте поресайзить окно и поскроллить страницу.

теперь попробуйте тоже самое сделать для

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-200000126/DTD/xhtml1-transitional.dtd">

и все равно, на дивах или таблицах.

(Проблема возникает при длинном контенте).

невижу в чем может помочь min-height. (про его поведение в разных браузерах я в курсе).

Edited May 18, 2010 by paulik

Sign In

Div или Table Height=100%

Question

paulik

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Searcher

Link to comment

Share on other sites

paulik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information