У меня действительно упрямый макет, который я просто не могу разрешить ..
- Left column - Fixed,Static (always in view)
- Right column - Fluid/liquid/scrollable
--- Header - fixed
--- left/main fluid/liquid
--- Right/sidebar - fixed width
--- footer
(если выше не ясно - заголовок, левый / главный, правый / боковая панель, нижний колонтитул ВНУТРИ правыйcolumn)
Теперь этот макет работает,
<div id="left-col">left col</div>
<div id="container">
<div id="header">header</div>
<div id="main">
<div id="sidebar">sidebar</div>
main
</div>
<div id="footer">footer</div>
</div>
#left-col {
width: 50px;
position: fixed;
background: yellow;
left: 0;
top: 0;
}
#container {
margin-left: 50px;
background: black;
}
#header {
background: green;
}
#main {
background: blue;
position: relative;
}
#sidebar {
position: absolute;
top: 0;
right: 0;
width: 50px;
background: pink;
}
#footer {
background: red;
}
, но все же у меня есть одна досадная проблема - когда основное содержимое недостаточно длинное - боковая панель и нижний колонтитул перекрываются.Это потому, что боковая панель: абсолютно позиционирована, но опять же, если я сделаю ее относительной, а страница будет изменена, боковая панель перейдет под основной ... (недостаточно места для жидкости ...), поэтому, мой вопрос заключается в следующем: у кого-нибудь есть идея, как сохранить нижний колонтитул под боковой панелью?(jQuery-трюки не работают, а CSS-трюки здесь довольно хитры ...) или какие-либо другие способы достижения этого макета?
JSFIDDLE: http://jsfiddle.net/VNU6Z/