Хочется изобразить следующее.
Страница с чёрным фоном, посередине блок с фиксированной шириной с оранжевым, допустим, фоном.
Этот блок всегда должен иметь как минимум 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+?
Интересует решение без использования таблиц.