javascript - How to Limit Fixed-Position Element to Height of Browser Window? -

I have a page with fixed-position sidebar, I would like to scroll the sidebar in this case where its content is in the browser window To be fit in is very high.

However, when I do the sidebar style with overflow-y: scroll , the scrollbar is visible, but it is disabled because the sidebar is sufficiently able to catch all the contents It's too long, even though it's too long for the browser window.

Is there any way to restrict the altitude of a fixed-partition element such that it will scroll when the browser expands beneath the bottom of the window?

A jQuery solution is acceptable for my application. I note that the sidebar does not extend all the way up to the top of the window.

: This version shows a header, which should be shown below the sidebar.

You need to set the height of the sidebar Right now, your sidebar is as high as your text block and Runs under the viewport (but you can not see it). If you set its height to 100% (or something), the sidebar will display a scrollbar if its contents can not be displayed at all.

So you need to change it:

  div # fixed-div {status: fixed; Left: 0; Top 80px; Width: 260px; Background color: silver; Overflow-y: scroll up; }   
 To do this:  
  div # fixed-div {status: fixed; Left: 0; Top 80px; Width: 260px; Background color: silver; Overflow-y: scroll up; Height: 100%; }  Edit :  
 If you want a solution with maximum browser support (older browsers), then you will need JavaScript. Here's a solution that depends on jQuery:  
 CSS:  
  * {margin: 0; Padding: 0; } Html, body {height: 100%; } Div # header-div {height: 90px; Background color: lime; } Div # Fixed-div {Status: fixed; Width: 260px; Background color: silver; Overflow-y: scroll up; }   
 Javascript:  
  var bodyHeight = $ ('body'). Height (); Var headerHeight = $ ('# header-div'). Height (); Var SidebarHyat = BodyHight - HeaderHight; . $ ('# Fixed div') height (sidebarHeight);   
 Working JSFDial: