0

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

这是该网站的屏幕截图：

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

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

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

该站点基本上由一个主体背景、一个用于菜单的 div 和一个用于内容的 div 组成。代码很乱，所以我把它省略了，但是如果你需要它，只需发表评论，我会立即添加它。

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

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

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

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

预先感谢您的任何回复，马格努斯

注意：这是一个早期问题的转贴，该问题被那些在对其进行评分之前没有正确阅读它的人丢弃。这个问题后来基本上消失了。这次我尽量把事情说得更清楚，所以如果我重复自己的话，我很抱歉。这也是我这次的帖子这么长的原因。

4

2 回答 2

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;
}
于 2012-09-23T19:49:54.413 回答
0

它可以是这样的

见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>
于 2012-09-23T19:55:42.393 回答