Вот что я пытаюсь выполнить:
+--------screen-----------------------+ | ______________________ |*| | |_static_header______| |*| | | | | |*| | | content |menu | |*| | | scrollable |static| |*| | | | | |*| | | | | |*| | | | | |*| +-------------------------------------+
Содержимое имеет переменную высоту, и полоса прокрутки содержимого должна отображаться в теле страницы (а не в ее области). Мне удалось понять основную идею, но у меня возникли проблемы с получением div содержимого в правильном положении, когда отображается полоса прокрутки, и даже если я настроил всегда показывать полосы прокрутки, я не могу использовать фиксированную ширину, потому что они отличаются из браузера в браузер.
<div style="position:absolute; background-color:Transparent; left:0px; right:0px; height:100px; z-index:2;">
<div style="background-color:Silver; width:1000px; height:100px; margin:0 auto;">
Header
</div>
</div>
<!-- Fixed div acting as the body "page" so the scrollbar shows as the page's -->
<div style="position:absolute; left:0px; top:0px; bottom:0px; right:0px; overflow-y:auto; padding-top:100px; z-index:1;">
<div style="position:relative; width:800px; height:100%; margin:0 auto; padding-right:200px;">
<div style="background-color:Orange; width:100%; height:900px;">
Content
</div>
</div>
</div>
<div style="position:absolute; left:50%; right:0px; padding-top:100px; z-index:0;">
<div style="width:500px; float:left;">
<div style="background-color:Green; float:right; width:200px; ">
Menu
</div>
</div>
</div>
В приведенном выше коде контент отключен шириной полосы прокрутки, как мне сделать это правильно с остальной частью страницы (т.е. вычислить ее положение без учета ширины полосы прокрутки, даже если она есть) ?