Garywoo Garywoo - 5 months ago 34
CSS Question

Header div stays at top, vertical scrolling div below with scrollbar only attached to that div

I have 2 main divs, the header and a scrolling list contained in a div.
I want the header to always remain at the top of the page, and the scrolling list below.
The scrollbar should be attached to the scrolling div and not to the whole page, i.e. the scrollbar does not appear on the right of the header, just the scrolling div.

This is what i'm trying to achieve:

______________________
|_______header_______|
| |*|
| Container Div |*|
| |*|
| |*|
| |*|
| |*|
| |*|
----------------------

* = scrollbar


The layout should be fluid and if the window is stretched vertically, only the container div and it's scrollbar should get longer.

I don't want to position the header
position: fixed;
as then the scrollbar will be on the right of it instead of underneath it.

Answer

HTML:

​<div class="header">This is the header</div>
<div class="content">This is the content</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS:

​.header
{
    height:50px;
}
.content
{
    position:absolute;
    top: 50px;
    left:0px;
    right:0px;
    bottom:0px;
    overflow-y:scroll;        
}​
Comments