Div или Table Height=100%

uchenik12345 · 18.05.2010, 13:16

Есть простая страница - колонка посередине, слева 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 тут не причем и проблемы не решат.

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

membrilius · 18.05.2010, 14:56

2 раза прочитал.. не очень пронял суть проблемы)

Вам надо что бы 3 колонки были одинаковы по высоте? и растягивались с окном по высоте?

если так то на скорую руку:

Код:

<!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>
		body {margin:0; padding:0;}
		#allpage {width:100%; 
		border:0;
		overflow: hidden;
		}
		#left,#content,#right {
			float:left; 
			border:3px solid #ff0000;
			padding-bottom: 32767px;
 			margin-bottom: -32767px;
		}

	</style>
</head>

<body>
<div id="allpage">

<div id="left">
ПОВТОРИТЕ ЭТО 100 РАЗ<br>
</div>
<div id="content">bbb</div>
<div id="right">ccc</div>

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

uchenik12345 · 18.05.2010, 15:40

Поидее бы поняли правильно, но тут ключевое слово растягивались а не обрезались.

Этот код не работает и не то.
Он просто обрезает длиннющие дивы снизу под величину контента, а надо именно чтоб растягивал их (потом туда пойдут 5 слоев, включая backgournd-position:bottom)

Простым языком надо чтоб высота дива была равна:
а) высоте окна если контента мало
б) высоте контента если его много.

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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></td>
</tr>
</table>
</body>

Вот такая штука должна получится. (это работает вроде везде.)
Только для doctype как было сказано.

membrilius · 18.05.2010, 15:59

То что я скинул.
он не обрезает содержимое.

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

У меня растягивается.. и содержимое не пропадает.

uchenik12345 · 18.05.2010, 16:51

увы, думаю вы в браузере увидите ту-же картинку:
как у вас получилось

вот, как надо.
Поресайзите размер окна чтоб оно было то больше контента, то меньше.

membrilius · 18.05.2010, 22:12

уууфффф.... пришлось вспомнить раскладку... вообщем вот проверяйте

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>proba</title>
	<style>
		html {
			height: 100%;
		}
		
		body {
			height: 100%;
			margin: 0; 
			padding: 0;
		}
		
		#allpage {
			height: auto !important;
			height: 100%;
			min-height: 100%;
			overflow: hidden;
		}
			
		#left, #content, #right {
			float: left; 
			height: 100%;
			padding-bottom: 32767px;
 			margin-bottom: -32767px;
			border: 3px solid #ff0000;
		}

	</style>
</head>

<body>
<div id="allpage">

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

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

uchenik12345 · 18.05.2010, 23:46

формально он все-же обрезает вытянутый див а не растягивает.
Потому как если сунем в div id="left" style="background:url(image.jpg) no-repeat bottom", то ее небудет видно.

top будет, а bottom улетит вниз на 32000 пикселей.

membrilius · 19.05.2010, 00:43

Вы от браузера на 2010 год хотите невозможного...

Для таких целей уже JavaScript в руки! Смотрите размер окна, размер дивов.. ставити стили...

uchenik12345 · 19.05.2010, 14:03

ну с виду выглядит как элементарнейший макет - обычная страница вытянута до конца.
правда, справа и слева требуются background картинки, аж 5 слоев
например для #left: (один repeat img, второй repeat-x top, третий repeat-y right, 4-ый no-repeat top right, 5-ый no-repeat right bottom).