Css 如何制作外层<；部门>；固定，而内部<；部门>；是否可以使用主窗口垂直滚动条进行滚动

请看这个：

我试图实现的是，我想使用主窗口滚动条，而不是内部滚动条；因此，我可以使用windows垂直滚动条浏览

innerContent

中的内容，但同时我希望固定外部div（

content

和

mainContent

）

可能吗

CSS

#标题{
位置：固定；
左：0；
排名：0；
宽度：100%；
高度：50px；
}
#页脚{
位置：固定；
左：0；
底部：0；
宽度：100%；
}
#内容{
背景色：#6565；
宽度：300px；
保证金：0自动；
填充顶部：10px；
边界半径：5px；
}
#主要内容{
保证金：0px自动；
背景色：#515151；
宽度：250px；
边界半径：5px；
填充顶部：20px；
}
#内容持有者{
颜色：#fff；
保证金：0自动；
宽度：200px；
高度：400px；
背景色：#000000；
边界半径：10px；
溢出：自动；
}

HTML

<div id="header">cfdvfvdfvfv</div>
<div id="content">
    <div id="mainContent">
        <div id="contentHolder">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum imperdiet lacus in aliquet. Nam leo
            risus, bibendum vel varius non, porta vel orci. Integer scelerisque est eu augue tempus lfvdvdfvuctus.
            Aliquam erat volutpat. Phasellus vulputate dolor ligula.
        </div>
    </div>
</div>
<div id="footer"></div>

CFDVFVDVFV
Lorem ipsum dolor sit amet，是一位杰出的献身者。在aliquet中不允许使用默认命令。南里奥
里苏斯，比班杜姆，维里乌斯，奥奇门。整型权杖是一种特殊的节杖。
阿利奎姆·埃拉特·帕特。黄花相思。

@Daedalus在中为此编写了一些jQuery

jQuery代码如下（编辑：将其更改为与您的代码匹配）：

var curScroll=0；
$（窗口）.bind（'mousewheel-DOMMouseScroll'，函数（e）{
var evt=window.event | | e；
var delta=evt.细节？evt.细节*（-120）：evt.细节；
if（δ<0）{
//向下滚动
curScroll+=10；
}
否则{
//向上滚动
curScroll-=10；
}
$（'#contentHolder'）。滚动顶端（curScroll）；
返回true；
}); 

正如我在上面的评论中提到的，一个

你还想要圆角。您可以通过给内容添加一些额外的填充，然后在其顶部和底部添加一些

固定的
页面边缘来实现这一点


关键位有：

#content {
    padding: 120px 150px; /* the 120px is the overlay vert height + 10px + 10px */
}
.page_horiz_strip {
    position:fixed;
    left: 150px;
    right: 150px;
    height: 10px;
    background: white;
}
.top_rounded {
    top: 90px; /* 10px less than the overlay vert height */
    border-radius: 10px 10px 0px 0px;
}
.bottom_rounded {
    bottom: 90px; /* 10px less than the overlay vert height */
    border-radius: 0px 0px 10px 10px;
}

注释


我在内容的顶部和底部添加了一个10px高的条带
（并使板条成圆）
叠加垂直高度为100px
因此，内容填充需要增加到100px+10px+
10px
因此，条带需要与页面边缘保持90px的距离，而不是距离
100像素
这是否回答了您的问题@azhrei在该示例中，边界将无法正确舍入
#content {
    padding: 120px 150px; /* the 120px is the overlay vert height + 10px + 10px */
}
.page_horiz_strip {
    position:fixed;
    left: 150px;
    right: 150px;
    height: 10px;
    background: white;
}
.top_rounded {
    top: 90px; /* 10px less than the overlay vert height */
    border-radius: 10px 10px 0px 0px;
}
.bottom_rounded {
    bottom: 90px; /* 10px less than the overlay vert height */
    border-radius: 0px 0px 10px 10px;
}