css - 静态标题+菜单，可滚动主体

Question

这就是我想要完成的:

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

在上面的代码中，内容因滚动条宽度而偏离，我怎样才能使它与页面的其余部分保持一致(即计算它的位置而不考虑滚动条宽度，即使它有滚动条宽度)？

Answer 1

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