css - 滚动页面不只是 div CSS

Question

我已经为这个问题苦苦挣扎了很长时间，虽然我已经找到了一些解决部分问题的好方法，但似乎没有一个可以结合使用，所以我决定问问你。

这是网站的截图:

http://i.stack.imgur.com/6C0k1.jpg

我希望实现的是当内容溢出蓝色容器时页面的最右侧出现一个滚动条，其中包含我所有内容的 div，而不是 div 本身的最右侧，就像我将 div 设置为 overflow: auto 或 overflow: scroll 一样。

换句话说，我希望页面滚动，而不是我的 div。

该站点基本上由一个正文背景、一个用于菜单的 div 和一个用于内容的 div 组成。代码比较乱，所以省略了，有需要的可以留言，我会马上补上。

除了右侧蓝色容器中的内容外，所有内容都应该像在 scrn 镜头中一样固定。我最初认为将除容器以外的所有内容都设置为 position:fixed 会起作用并触发一个滚动条出现在可用于滚动 div 的页面上，但它没有。但这不起作用，因为容器中任何可见的溢出都只是“离开”页面；它不会触发滚动条。

正如我在 scrn 镜头中也指出的那样，container-div 的顶部和底部都有填充，并且还略微透明。

这两个特性似乎让事情变得更加困难。填充，因为设置 overflow: visual 会使内容溢出，从而可见，即使通过填充也是如此。 透明度是个问题，因为我不能只是剪掉填充并给它一个高于内容本身的 z-index 来隐藏它；它仍然可以通过它看到。背景图像设置为百分比或设置为“覆盖”(仍在确定哪个最有效)，因此用它覆盖的背景图像部分剪切填充，也不会起作用。

我希望我已经足够清楚地提出了我的问题和问题。如果您有任何问题或反馈，请发表评论。

提前感谢您的任何回复， 马格纳斯

注意:这是对一个早期问题的重新发布，该问题被某个在给它打低分之前没有仔细阅读它的人丢弃了。这个问题后来基本上就死了。这次我试图让事情变得更清楚，所以如果我重复一遍，我很抱歉。这也是我这次发帖这么长的原因。

Answer 1

是这样的吗？

演示:http://jsfiddle.net/6R7c2/

HTML:

<div id="top">Top</div>
<div id="middle">
    <div>Content
    </div>
</div>
<div id="bottom">Bottom</div>

CSS:

html,body{
    width:100%;
    height:100%;
    margin:0;
}
#top,#bottom{
    height:10%;
    background:blue;
    color:white;
}
#middle{
    height:80%;
    overflow:auto;
}

#middle>div{
    height:10000px;
    border:25px solid red;
}