Question

I have a div that has scrollable content, but it is vital that this div, is positioned relatively with a margin of 36px from the top of the browser, or absolutely positioned from the top.

It is also important that the div fills the height of the browser’s viewport.

My problem is that the bottom of the div’s scrollbar cannot be seen as it is 36px pushed down. The content is also pushed down, but I have been able to get round this by adding padding to the bottom. This happens for all browsers. Is there a way I can make this div have a scrollbar that fits to the browser viewport which takes into account of the div’s margin from the top?

The result is the same if I positioned the div absolutely or relatively with margin-top: 36px;

The css for this div is as follows:

div.#panel1 {
   position: absolute;
   top: 36px; 
   right: 0;
   overflow: auto;
   background: #636362;
   padding: 0 0 20px 0px;
   width: 290px;
   height: 100%;
}

Additionally I find the scrolling experience in IE 7 really slow and jerky for this div, but the browser’s scrollbar is fine? Is there a bug I should know of?

Answer 1

You can set both top and bottom when positioning something absolutely: http://jsfiddle.net/kizu/xSgTW/

So, if you don’t set height and set

top: 36px;
bottom: 0;

Then the div’s top line would be on 36px and bottom, well, at the bottom.

Regarding scrolling: there can be a lot of things that affect the scrolling speed in IE, but AFAIR the scrolling in blocks with overflow: auto is always slower than scrolling of the body.