Интересная задачка.
Могу предложить только следующее:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.wrapper {
min-height: 100px;
position: relative;
border: solid black 1px;
}
#col1 {
width: 80%;
}
#col2 {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 20%;
background: green;
}
#xwrap {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#in1, #in2, #in3, #in4, #in5 {
position: absolute;
width: 100%;
}
#in1 {top: 0%; bottom: 80%; background: #E79999}
#in2 {top: 20%; bottom: 60%; background: #DDDD90}
#in3 {top: 40%; bottom: 40%; background: #99E799}
#in4 {top: 60%; bottom: 20%; background: #9999E7}
#in5 {top: 80%; bottom: 0%; background: #DC90DE}
</style>
</head>
<body>
<div class="wrapper">
<div id="col1">ETAOIN SHRDLU<br />ETAOIN SHRDLU<br />ETAOIN SHRDLU<br />ETAOIN SHRDLU<br />ETAOIN SHRDLU<br />ETAOIN SHRDLU<br />ETAOIN SHRDLU<br />ETAOIN SHRDLU<br />ETAOIN SHRDLU<br />ETAOIN SHRDLU<br />ETAOIN SHRDLU<br />ETAOIN SHRDLU<br />ETAOIN SHRDLU<br /></div>
<div id="col2">
<div class="xwrap">
<div id="in1">1</div>
<div id="in2">2</div>
<div id="in3">3</div>
<div id="in4">4</div>
<div id="in5">5</div>
</div>
</div>
</div>
</body>
</html>
Если вкратце, задавать 100% от auto мы как не могли так и не можем. Но зато у нас есть в кармане блочная модель и
top с
bottom. Задаем
.wrapper position: relative и позиционируем от него абслютно
#col2. Количество текста в правой колонке, увы, влиять на высоту враппера уже не сможет.
Далее, вставляем
.xwrap высотой 100%. Без него Опера отказывается делать последующие действия (да и, кстати, права, процент от auto — всегда ноль, если мне не изменяет склероз).
Ну, а дальше, уже от
.xwrap, позиционируем пять блоков через
top и
bottom, чтобы не было швов из-за округления в меньшую сторону.
Работает в Op10.52, Fx3.5.
…хотя, имхо, это всё, по-хорошему, таблица.