-
Здравствуйте!
Я почитал ваши статьи про резиновую высоту, всё ясно и доступно, но у меня особый случай.
Я уже несколько дней бьюсь над следующей проблемой: мне нужно сделать резиновую по высоте таблицу с резиновым по высоте дивом внутри. Если содержимое страницы меньше высоты окна браузера, то таблица и див занимают 100% высоты oкна, если же содержимое больше, то таблица и див тянутся на высоту этого содержимого. Мне удается сделать отдельно резиновую по высоте таблицу и резиновый по высоте див, но когда я вставляю див в таблицу все портится. У таблицы и дива разные фоновые рисунки. Указать их в html и body невозможно, так как в одной tr будет 2 и более td с резиновыми по высоте дивами и шириной, равной ширине окна, т.е. сайт будет иметь горизонтальную прокрутку.
Возможно ли организовать такую задумку, использую лишь возможности css?
Самое страшное то, что все это должно быть кроссбраузерно. -
Может приведете немножко кода (в котором "не получается")?
А то на слух что то тяжело :) -
Возможно ли организовать такую задумку, использую лишь возможности css? Самое страшное то, что все это должно быть кроссбраузерно.
Можно я процитирую себя же из той статьи?
я подумал, что такой пример все же будет полезен, потому что наглядно показывает, на какие ухищрения надо идти при использовании неподходящих инструментов. То есть это будет скорее отрицательный пример. Больше того, в этой статье будет пример сразу двух вариантов: один другого кривее :-).
Использовать CSS для верстки таких макетов во-первых трудно, а во-вторых бесполезно, потому что преимущества CSS там просто не нужны, макет монолитен и имеет целью отображение только в том виде, в котором задуман.
-
вот код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title></title>
<style type="text/css">
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
</style>
</head>
<body>
<table cellspacing=0 cellpadding=0 style="width: 2048px; height: 100%;">
<tr>
<td style="vertical-align: top; height: 100%; width: 1024px; background: gray;">
<div style="position: relative; top: 0; left: 0; float: left; width: 100%; height: 100%; height: auto; background: yellow;">
<div style="width: 1000px; margin: 0 auto;">
<br>содержание страницы<br>
<br>содержание страницы<br>
</div>
</div>
</td>
<td style="vertical-align: top; height: 100%; width: 1024px; background: green;">
<div style="position: relative; top: 0; left: 0; float: left; width: 100%; height: 100%; height: auto; background: blue;">
<div style="width: 1000px; margin: 0 auto;">
<br>содержание страницы<br>
<br>содержание страницы<br>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
Таблица резиновая по высоте, а див "не хочет слушаться". В чем же моя ошибка? -
Высота первой ячейки может быть больше второй, причем вторая ячейка и див внутри нее должны тянутся на высоту первой ячейки.
