Приветствую!
Ребят, что-то меня заклинило, и никак я не могу решить простую, в общем-то, задачу. Собственно, задача: поместить несколько таблиц друг в друга (без каких-либо промежутков) во весь экран.
Когда содержимое внутренней таблицы не превышает высоту экрана, то всё хорошо. А вот когда контент не помещается, то таблица, соответственно, вырастает сообразно содержимому. А внешние-то table‘ы – нет! Так и остаются на месте. Как сделать так, чтобы они двигались вместе?
http://s017.radikal.ru/i405/1605/4e/d5119940ed94.jpg
http://s41.radikal.ru/i094/1605/75/58aae8416ead.jpg
Подскажите, пожалуйста, решение проблемы. Перепробовал кучу вариантов. Всё не то. Наверняка есть более элегантный способ сделать то же самое. Спасибо.
HTML:
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="begin">
<table class="t1"><tr><td align="center" valign="top">
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<table class="t2"><tr><td align="center" valign="top">
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<table class="t3"><tr><td align="center" valign="top">
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
</td></tr></table>
</td></tr></table>
</td></tr></table>
</div>
</body>
</html>
CSS:
table.t1 {
background-color: #004400;
position: absolute;
top: 0px; left: 0px;
width: 100%; height: 100%;
border: 12px solid #ff0000;}
table.t2 {
background-color: #0000ff;
position: absolute;
top: 0px; left: 0px;
width: 100%; height: 100%;
border: 12px solid #ff9933;}
table.t3 {
background-color: #440000;
position: absolute;
top: 0px; left: 0px;
width: 90%; height: 100%;
border: 12px solid #007700;}
p {color: #ffffff;}