这就是我想要完成的:
+--------screen-----------------------+ | ______________________ |*| | |_static_header______| |*| | | | | |*| | | content |menu | |*| | | scrollable |static| |*| | | | | |*| | | | | |*| | | | | |*| +-------------------------------------+
The content is of variable height, and the content scrollbar must be show in the page body (and not on it's on area). I managed to get the basic idea, but I'm having trouble to getting the content div in it's correct position when the scrollbar shows, and even if I set to always show the scrollbars, I can't use a fixed width because they differ from browser to browser.
<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>
在上面的代码中,内容因滚动条宽度而偏离,我怎样才能使它与页面的其余部分保持一致(即计算它的位置而不考虑滚动条宽度,即使它有滚动条宽度)?
最佳答案
如果我正确理解您的问题,这将是一个解决方案:http://jsfiddle.net/7pJS8/
关于css - 静态标题+菜单,可滚动主体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5196614/