Это совсем не возможно, и вам не нужен javascript. Для вашего браузера вам понадобятся некоторые хаки IE6.
Ключом к макету является то, что вы можете установить один или более краевые позиции на абсолютно позиционированном элементе. Вот хорошая статья о технике: http://www.alistapart.com/articles/conflictingabsolutepositions/
Вот демо: http://www.spookandpuff.com/examples/2col2section.html
и источник:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>2 col, 2 section layout.</title>
<style type="text/css" media="screen">
#leftColumn {
position:absolute;
top:10px;
bottom:10px;
left:10px;
width:400px;
}
#rightColumn {
position:absolute;
top:10px;
bottom:10px;
right:10px;
left:410px;/* This must equal the total width of the #leftColumn, incl padding, border, margin, etc. */
}
.topSection{
position:absolute;
top:10px;
height:120px;
left:10px;
right:10px;
padding:10px;
}
.bottomSection{
position:absolute;
bottom:10px;
top:160px; /* This must equal the total height of the .topSection, incl padding, border, margin, etc. */
left:10px;
right:10px;
padding:10px;
overflow-y:auto;
}
/* Debug styles */
body {background-color:#CCC;}
div {border:1px solid #FFF;}
#leftColumn {background-color:#7EF4B0;}
#rightColumn {background-color:#EEF4A7;}
#leftColumn .topSection{background-color:#56A97A;}
#rightColumn .topSection{background-color:#D6D06D;}
</style>
</head>
<body>
<div id="leftColumn">
<div class="topSection">
<p>Left column, top section.</p>
</div>
<div class="bottomSection">
<p>Left column, bottom section.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div id="rightColumn">
<div class="topSection">
<p>Right column, top section.</p>
</div>
<div class="bottomSection">
<p>Right column, bottom section.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>
Есть несколько приемов: Во-первых, я только проверил это в Firefox, чтобы дать вам общая идея - есть некоторые необходимые исправления для IE, которые я еще не добавил: проверьте список в отдельной статье вверху для деталей.
Я разрешил 10px дополнительное пространство вокруг всех ящиков, чтобы проиллюстрировать идею - вы, вероятно, установили бы их в 0 в реальном макете.
Вы можете установить высоту .topSection по-разному между колоннами с некоторыми правилами, такими как:
#leftColumn .topSection {height:xxx}
#leftColumn .bottomSection {top:xxx}
#rightColumn .topSection {height:yyy}
#rightColumn .bottomSection {top:yyy}
Я хотел бы использовать контейнер с классом (или класс на тело тега), чтобы определить ширину левый столбец, что-то вроде:
#container.narrow #leftColumn {width:100px}
#container.medium #leftColumn {width:200px}
#container.wide #leftColumn {width:400px}
Это позволяет определить набор ширины «шаблонов» вы можете переключаться между ними.
должен быть довольно прямым, если левое и правое может быть отношением ширины экрана. Могу ли я увидеть одну из ваших попыток? – edl
Какие браузеры вы поддерживаете? – drusnov
Должно быть довольно легко, если вы готовы внести какую-то работу. – User