Так что здесь все делается с помощью div, абсолютное позиционирование в%, и вот часть, которая вам не понравится, с определенной высотой, заданной в пикселях. Проблема в том, что если вы используете ячейки таблицы (td), у td нет высоты, и поэтому любой элемент внутри будет вычислять 0 для высоты 100%.
Когда мы используем div, проблема в другом. Мы можем убедиться, что они сохраняют свои свойства высоты, но нет никакого способа сказать div слева: «быть такой же высоты, как div в центре». По крайней мере, так, как я знаю. Тем не менее, кажется, что ваш flash-объект - самая высокая вещь, и вы можете легко установить высоту всех трех делителей в идеальное количество пикселей. Затем растяните список навигации ul на высоту до 100% от div, в который он вложен.
Есть еще один способ сделать это, который может лучше удовлетворить ваши потребности, я опишу это в самом низу.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TheDavidFactor's Layout</title>
<style type="text/css">
body, html {
background: black;
width:100%;
height:100%;
padding:0;
margin:0;
}
#left {
position:absolute;
top:10%;
left:0;
background: #eeeeee;
width: 20%;
padding: 2%;
margin:0;
}
#right {
position:absolute;
top:10%;
left:76%;
background: #eeeeee;
width: 20%;
padding: 2%;
margin:0;
}
#center {
position:absolute;
top:10%;
left:24%;
background: #dddddd;
width: 48%;
padding: 2%;
margin:0;
}
#flash {
background:red;
width: 500px;
height: 500px;
padding:0;
margin:0;
}
ul {
height: 500px;
padding:0;
margin:0;
padding-left:25px;
background: #4359ac;
color: #ffffff;
}
li {
height: 10%;
padding:0;
margin:0;
}
</style>
</head>
<body>
<div id="left">
<ul>
<li>Spa</li>
<li>Hotel</li>
<li>Activities</li>
<li>Hobbies</li>
<li>Night Life</li>
<li>Food</li>
<li>Feedback</li>
<li>Contact</li>
<li>About Us</li>
<li>Copyright</li>
</ul>
</div>
<div id="center">
<div id="flash">Here's your flash Object</div>
</div>
<div id="right">
here's the right div
<br>
<p>Let's throw some random text in here to take up space for now.</p>
</div>
</body>
</html>
Другой вариант, который у вас есть, - это обернуть три столбца в div контейнера и определить высоту для этого div, а затем растянуть каждый столбец до 100% высоты внутри этого div контейнера.