CSS inheritance with position:fixed used for scrolling DIVS

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 开发者_如何学JAVAall 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/

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?

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:static or position: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, using z-index and position: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.