CODEWITHSUNDEEP
htmlcss
Jonathan Wood
Jonathan Wood

Reputation: 67195

Create Scrollable Element and Set Size to Match Window

I have a page with a header followed by a side bar on the left and a main content area on the right. I would like the main content area on the right to scroll independently from the side bar on the left.

-----------------------------------
| Header                          |
|---------------------------------|
|         |                       |
|         |                       |
| Left    | Main                  |
| Sidebar | Content               |
|         |                       |
|         |                       |
-----------------------------------

I know that I can style the main content with { height: 500px; overflow-y: auto; }, but then the height I set won't always match the remaining height of the window.

Is there any way to accomplish this and have my main content use up all the available window space as it normally would?

Upvotes: 0

Views: 1145

Answers (1)

darma
darma

Reputation: 4747

You can make it with absolute positionning, see there : http://jsfiddle.net/KpJgd/

#content{
    position:absolute;
    top:200px;
    right:0;
    bottom:0; /*this is the trick where the <div> goes til the bottom of the window*/
    width:70%;    
    overflow:auto;
    background-color:#008800;        
}

Note you have to specify in your CSS :

html, body{
    width:100%;
    height:100%;
    overflow:hidden;
}

Upvotes: 2

Related Questions