我想要实现的是:
+--------屏幕-----------------------+ | ______________________ |*| | |_静态头部_________| |*| | | | | |*| | | 内容 |菜单 | |*| | | 可滚动的 |静态的| |*| | | | | |*| | | | | |*| | | | | |*| +-------------------------------------+
内容高度可变,内容滚动条必须显示在页面主体中(而不是自己的区域)。我已经掌握了基本思路,但当滚动条显示时,我无法将内容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>
在上面的代码中,内容与滚动条宽度不对齐,如何使其与页面的其余部分正确对齐(即计算其位置时不考虑滚动条宽度,即使有滚动条也是如此)?