静态标题+菜单,可滚动的正文

Question

这就是我想要完成的事情:

+--------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>

在上面的代码中,内容是通过滚动条宽度关闭的,如何在页面的其余部分正确显示它(即计算它的位置而不考虑滚动条宽度,即使它有一个)？

Answer 1

如果我理解你的问题,这将是一个解决方案:http://jsfiddle.net/7pJS8/