Question

我一直在努力解决这个问题很长一段时间，虽然我已经找到了一些很好的解决方案来解决我的部分问题但是它们似乎都没有合并，所以我决定问你。

这是该网站的scrn镜头：

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;
}

Answer 2

可能是这样的

请参阅http://jsfiddle.net/QfsvB/

<强> CSS

div.scroll 
{
background-color:#00FFFF;
width:100px;
height:100px;
overflow:scroll;
}

<强> HTML

<div class="scroll">You can use the overflow property when you want to have better control of the layout, the overflow property specifies what to do if the content of an element exceeds the size of the element's box.</div>

滚动页面不仅仅是CSS

2 个答案: