问题描述:

Here is my plunker.

Here is what I am trying to achieve:

  1. The page should never scroll in any direction
  2. Content that goes beyond its bounds should scroll, but only for that container.

I have a main content area that when its contents become too wide the horizontal scroll bar displays correctly only for the #content section.

When the content is too tall, the vertical scroll bar appears for the page. I would like it to only appear in the #content section.

Thanks for the help.

网友答案:

Okay I have made a working example.

1: Make the body:

> overflow: hidden

2: Make the area you want to scroll

> overflow: scroll

Check it out:

JS Fiddle

网友答案:

As suggested, the answer was to use absolute positioning to prevent the page from scrolling vertically.

  header {
    height: 50px;
    width: 100%;
  }

  #main {
    position: absolute;
    top: 50px;
    width: 100%;
    bottom: 0;

    #content {        
      overflow: auto;
    }
  }

The only downside that I can see with this approach is that I had to state a height for the header and a top for where the main section was to meet up with it. This would prevent the header from being sized at run-time. This seems to be a small price to pay as now both scroll bars can be completely visible at the same time.

Here is the resulting plunker.

相关阅读:
Top