仅滚动页面而非div CSS

我已经为这个问题挣扎了很长一段时间了，虽然我已经找到了一些解决问题的好方法，但它们似乎都不起作用，所以我决定问你

以下是该网站的scrn快照：

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

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

该站点基本上由一个主体背景、一个用于菜单的div和一个用于内容的div组成。代码非常混乱，所以我省略了它，但是如果您需要它，请留下一条注释，我会立即添加它

---

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

正如我在scrn快照中指出的，container div在顶部和底部都有填充，并且略微透明

这两个特点似乎使事情变得更加困难。填充，因为设置overflow:visual会使内容溢出，因此即使通过填充也可见。 透明度是一个问题，因为我不能为了隐藏它而删掉填充并给它一个高于内容本身的z索引；它仍然可以通过它看到。背景图像设置为某个百分比或设置为“覆盖”（仍在计算哪一个效果最好），因此用它覆盖的背景图像片段剪切填充也不起作用

我希望我把我的问题和问题讲得足够清楚。如果您有任何问题或任何反馈，请留下评论

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

注意：这是一个早期问题的复述，有人在对其进行降级之前没有仔细阅读，就把这个问题搞糟了。这个问题基本上在后来就消失了。这次我试图把事情说得更清楚，所以如果我重复一遍，我很抱歉。这也是我这次的帖子这么长的原因

像这样的

演示：

HTML:

---

可能是这样的

看

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>

当您希望更好地控制布局时，可以使用overflow属性，overflow属性指定当元素的内容超过元素框的大小时应执行的操作。

您可以尝试将div定位为固定。这只会使附加内容溢出，而不会触发滚动条。“但这不起作用，因为容器中的任何可见溢出只会“离开”页面；它不会触发滚动条。”听起来您可能在其中，我来试试。如果你想让div触发一个滚动，你必须改变div的高度尺寸，div就是我的蓝色容器，对吗？在这种情况下，这会不会触发div右侧的滚动条，而不是页面？@MagnusLindOxlund这会触发容器div的滚动条。我希望在正文/页面上有一个滚动条。不过，它的功能与上面的相同。：）可能地我想你可能遗漏了一些有问题的地方，但我会摆弄一下，看看情况是否如此。：）请稍等。我真的不知道如何以一种有效的方式将菜单添加到小提琴中。。您如何使“中间”div滚动，而不是实际包含溢出内容的“内容”div？@MagnusLindOxlund如果问题区域是指菜单，请参阅。content div的高度为10000px，大于

#middle

的高度。然后，出现一个滚动条，内容div被滚动。答案就在这里！为了触发页面滚动条，我需要将像素高度定义为超过任何分辨率的水平。我很早就尝试过100%的高度，但我猜这是100%的初始观点，而不是内容？无论如何，谢谢你的帮助！它解决了我的问题：）@MagnusLindOxlund我不太明白你最后的评论，但如果我解决了你的问题，请随意将我的答案标记为已接受的答案。如果将

height:100%

设置为元素，则其高度将与其父元素的高度相同；或者如果它有

位置：绝对

，它的第一个祖先的

位置

不同于

静态

；或者，如果它有

位置：fixed

，则显示窗口。

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

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