CSS: fixed position sidebar is cropped

Question

My website has a sidebar with a lot of materials, so the browser’s viewing window must be at least 1,020 pixels tall in order to view everything without scrolling (unless, of course, you zoom out).

I want the position of the sidebar to be fixed, so that when you are on a page with a lot of content, the sidebar remains in the same position as you scroll. It was very easy to implement:

div#Sidebar { position: fixed; } 

This works well on my computer as long as the browser maximizes because my monitor works with a resolution of 1920 x 1200. But if I resize the browser window, the sidebar will turn off. When I look at the contents of the page, I can see the entire contents of the page, but the sidebar remains cut off due to its fixed position. Therefore, it seems that I have only two options:

• Make the sidebar position unfixed (bad), but give users the ability to see the entire sidebar (good).

• Make the sidebar position fixed (good), but not allow users to see the entire sidebar (bad).

Is there a way to combine these two options?

Answer 1

You can do a test in javascript. Either in pure javascript or in jQuery (it would be much easier).

Here is an example for jQuery:

 $(window).resize(function() { if ( $(window).height() < 800) { $('#Sidebar').addClass('beAbsolute').removeClass('beFixed'); } else { $('#Sidebar').addClass('beFixed').removeClass('beAbsolute'); } }); 

CSS:

 .beFixed {position:fixed;} .beAbsolute {position:absolute;top:0px;} 

By default, use the absolute version so that a non-JavaScript user can see the entire sidebar.

Answer 2

Try overflow-y:auto and limit the size. I recommend limiting it to something smaller than 1020 pixels, because many people work on smaller screens (my 15-inch laptop, for example, is 1366x768, so I could only see 3/4), and even those on large screens do not have to maximize their windows. Unconfirmed, but height:100% may / should work.

It will add a scrollbar to the div itself, so be sure to keep this in mind, but it will scroll the div, which will solve your problem. This sacrifices little usability (scrolls other than the main window are usually disapproving).