CSS继承与位置：固定用于滚动DIVS
我有一个比外部 DIV 内容更多的 DIV。目前我正在使用溢出：自动；创建滚动条。但是，我希望滚动条位于浏览器级别，而不是位于 DIV 一侧。
我尝试将所有其他DIVS设置为position:fixed，但是当我将包含的DIV设置为position:fixed时，我想要滚动的DIV继承了这个属性，从而冻结了整个页面。如果不将position:fixed放在容器DIV上，它也会滚动。
有没有办法阻止这种继承，因此是唯一可以滚动的元素，而其余元素是固定的？
我的网站： http://www.longmeadoweventcenter.com/dev/reservations/
I have a DIV that has more content than the outside DIV. Currently I am using overflow:auto; to create a scroll bar. However, I would like to have the scroll bar at the browser level instead of on the side of the DIV.
I have tried to set all other DIVS to position:fixed but when I set the containing DIV to position:fixed the DIV I want to scroll inherits this property thus freezing the whole page. Without putting position:fixed on the container DIV it will scroll as well.
Is there a way to stop this inheritance so is the only element that can scroll while the rest is fixed?
My site: http://www.longmeadoweventcenter.com/dev/reservations/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果我正确理解您的问题，除非可滚动内容充当页面上的背景，否则这是不可行的。
您有绘制意图的模型吗？
If I correctly understand your question this is not doable unless the scrollable content acts as the background on the page.
Do you have a drawn mock-up of your intentions?
您所要求的并不是真正的“完成”做事方式。按照你问的方式肯定是不可能的。
明显的问题是，如果页面的其余部分对于屏幕来说太大并且需要滚动条，会发生什么？
也许可以实现您想要的效果，但代价是完全重新设计页面结构，并严重限制您可以对页面其余部分执行的操作。
最接近的方法是完全更改页面布局，使可滚动区域成为主页面元素，并使用正常的
position:static或position:relative.在没有任何其他内容的情况下，这将像普通页面一样运行，但所有侧面都需要较大的边距。然后，页面内容的其余部分将使用z-index和position:fixed;定位在其顶部。这需要采用至少四个单独的元素的形式，有效地充当主要内容的框架。您可以将任何您喜欢的内容放入这些框架元素中，但显然与您描述的布局不同，您不能让内容在可滚动区域后面流动，也不能在四个 div 之间流动。所以效果是可能的，但并不容易，而且可能不是你想象的那样。
What you're asking is not really the 'done' way of doing things. It certainly isn't possible in the way you're asking.
The obvious problem is what happens if the rest of your page is too big for the screen, and needs a scroll bar?
It is maybe possible to achieve the effect you're after, but at the price of completely re-engineering your page structure, and seriously limiting what you can do with the rest of the page.
The closest you're going to get to this is to completely change the page layout such that the scrollable area is the main page element, with a normal
position:staticorposition:relative. In the absence of any other content, this would act like a normal page, but would need large margins on all sides. The rest of your page content would then be positioned on top of it, usingz-indexandposition:fixed;. This would need to be in the form of at least four separate<div>elements, effectively acting as a frame for the main content. You could put anything you like into these frame elements, but obviously unlike the layout you described, you couldn't have content that flowed behind the scrollable area, nor between the four divs.So the effect is possible, but not easily, and probably not in the way you were envisioning.