Растянуть div на 100% по высоте - Веб-программирование

Stormbr!nger · 06.11.2005, 13:20

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

Пробую писать так:

Код HTML:

<!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>
<title>Untitled Document</title>
<style>
html,body,div {margin:0;padding:0}
html,body {height:100%;background:#000000}
div.main {width:780px;margin:0px auto;background:#ff9900;height:100%;color:#ffff00}
</style>
</head>
<body>
<div class="main">
text<br />
text<br />
text<br />
...and a lot of text...
</div>
</body>
</html>

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

Вопрос - можно ли достигнуть желаемого без css-хаков под IE5+, Mozilla1.0+,Opera7+?

Интересует решение без использования таблиц.

Hubbitus · 07.11.2005, 12:46

Цитата:

Stormbr!nger:
Вопрос - можно ли достигнуть желаемого без css-хаков под IE5+, Mozilla1.0+,Opera7+?

Если хочется валидного xhtml - то нельзя вроде. Нету высоты в стандарте.
А вообще можно, почитайте, были уже подобные темы:
http://www.imho.ws/showthread.php?t=87353
http://www.imho.ws/showthread.php?t=55300

06.11.2005, 13:20	# 1
Stormbr!nger Newbie Регистрация: 08.04.2005 Адрес: Львов Сообщения: 31	Растянуть div на 100% по высоте Хочется изобразить следующее. Страница с чёрным фоном, посередине блок с фиксированной шириной с оранжевым, допустим, фоном. Этот блок всегда должен иметь как минимум 100% высоты окна браузера. Пробую писать так: Код HTML: <!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> <title>Untitled Document</title> <style> html,body,div {margin:0;padding:0} html,body {height:100%;background:#000000} div.main {width:780px;margin:0px auto;background:#ff9900;height:100%;color:#ffff00} </style> </head> <body> <div class="main"> text<br /> text<br /> text<br /> ...and a lot of text... </div> </body> </html> Hо если высота контента блока main превышает высоту окна браузера, то в Мозилле и Опере блок не будет растягиваться на высоту контента, а будет иметь высоту окна браузера, т.е. визуально текст будет "выпадать" за пределы блока. Вопрос - можно ли достигнуть желаемого без css-хаков под IE5+, Mozilla1.0+,Opera7+? Интересует решение без использования таблиц.

Опции темы
Версия для печати Отправить на email