1

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.

KayoticSully
  • 1,400
  • 5
  • 15
  • 30

4 Answers4

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.

Roddy of the Frozen Peas
  • 14,380
  • 9
  • 49
  • 99
  • That is perfect :). Just what I was looking for. Thank you for being informative about how your solution works as well! – KayoticSully Aug 21 '12 at 22:02
  • 1
    I'd like to point out that Frankie's answer below is quite correct as well. The only reason this solution works is because your header has an explicit height and your menu an explicit width. If your header was not explicitly 86px -- for example, if it was dependent on the size of the content or font size -- then you wouldn't be able to use absolute positioning in this fashion and you'd be left with the dilemma Frankie describes in his answer and the link in his comment. – Roddy of the Frozen Peas Aug 21 '12 at 22:06
0

The problem is that you are setting 

#shell-content{
    height:100%
}
body{
    height:100%
}

Which means the body fills to fit the window, and then the shell-content expands to fill that space (the EXACT size of its direct parent), but is displaced by shell-top-wrapper, so it overflows. You should either decide on a relative height for the shell top wrapper, or change the height of the shell-content dynamically (using javascript).

FrankieTheKneeMan
  • 6,645
  • 2
  • 26
  • 37
  • I would like the top bar to be a static height and I'm trying to avoid using javascript for that since the site will be fairly javascript heavy on some pages. So I am trying to limit the need for javascript in the main layout. And I figured that is the problem, but there has to be some way to create something of this effect in CSS, even if I need to modify my HTML to group things differently. I may be asking too much of CSS, but I could have sworn this was possible without the aid of javascript. – KayoticSully Aug 21 '12 at 21:35
0

Here is a take off of your fiddle: http://jsfiddle.net/eeMz4/. You'll see that with the large image in the content area, it scrolls. If you take the image OUT and replace it with text or something smaller than the available space, the scrollbar goes away.

The trick was adding overflow:auto to #shell-content.

Cheers!

Cynthia

Cynthia
  • 5,273
  • 13
  • 42
  • 71
  • 1
    You shouldn't overwrite the original JSFiddle but instead fork a new one. That way other people who stumble on the question won't be confused or unable to answer correctly because they can't tell the difference between your code and the OP's. – Roddy of the Frozen Peas Aug 21 '12 at 21:36
  • Just did :) Thanks for the advice though. – Cynthia Aug 21 '12 at 21:36
  • 1
    I see that but it just adds a second scroll bar inside the content div. I am trying to remove the scrollbar from the whole page unless there is content. – KayoticSully Aug 21 '12 at 21:39
0

I made a few small changes: http://jsfiddle.net/wU2Hd/5/
- remove the height from content
- remove the height from content-shell
- set the body background to white
- set the sidebar background to grey

This will not actually stretch up the content, but it will appear like it does. Scrollbar will appear automaticly when the content becomes bigger then the viewport.

Pevara
  • 14,242
  • 1
  • 34
  • 47