Question

I have been working at this for the past day and a half. So any help will be greatly appreciated.

The general layout has a top bar and a side bar which are position fixed. I want the content container to fill the rest of the page without a scroll bar unless it is necessary due to content. I am not sure if it is possible to do purely in CSS or if I will need to modify my html structure as well. I have posted a fiddle below to show the most simple example possible.

http://jsfiddle.net/wU2Hd/

Again, any help or pushes in the right direction will be greatly appreciated, this has been throwing me for a loop.

Answer 1

It’s not impossible. Check out this JSFiddle I forked from yours.

I did not need to change the HTML structure, but there were some important changes made to the CSS.

First I removed the height: 100%; from html, body. This was forcing the scroll bar to appear.

Then I removed the height and width declarations from .content, and gave #shell-content absolute positioning:

#shell-content {
    background: #FFFFFF;
    position:absolute;
    left: 100px;
    top: 86px;
    bottom: 0px;
    right: 0px;
    overflow-y: auto;
}​

The left and top are values based on the explicit height you gave to your header and the explicit width you gave to your menu. The overflow-y: auto tells it to only show the scroll bar if the content out-grows its available space, but not otherwise.

The JSFiddle has some crazy-long lorem ipsum text to show the effect. If you change it to less text, the scrollbar will disappear entirely.