A tricky height setting

[BFTrick]

Hello.

Here is the live site which I am trying to remove all of the frames from.

http://www.gmmstudios.com/

Here is my Work in progress site.

http://patrickrauland.com/gmm/

The tricky part is that I need the content area to be as tall as the browser will allow, and then to add a scroll bar. I want to be able to always see the navigation on the left.

I also want the nav section to show as much of the background as possible, without showing so much that it adds a scroll bar.

How can I do this in CSS? It seems to me that if I want a scroll bar for the content section that I have to set a specific height. Is there a way of setting

[catterz]

I've noticed a bit of code in your stylesheet under #nav: height: 1168px;

Try setting this to 100% first off and see what happens. You've also set the height of the #content_pane section to 500px, try setting this to *px (I forget if this is correct syntax or not though).

[BFTrick]

Thanks for the quick reply. That didn't quite solve the issue.
setting the #nav height to 100% will make that section as tall as your browser is. If the user scrolls down, there will be unfilled space.

I tried setting the #content_pane to *px but that didn't do anything. I also tried 100% and that didn't do anything.

[Andyram2k]

Hi Bftrick,
Make a copy of your style sheet and replace the style.css styles with:

HTML {
MIN-HEIGHT: 100%; height: 100%;
}
BODY {
FONT-SIZE: 12px; MIN-HEIGHT: 100%; height: 100%; overflow-y: scroll;
}
H3 {
FONT-SIZE: 18px; FONT-WEIGHT: normal
}
H2 {
FONT-SIZE: 24px
}
#header {
BACKGROUND: url(http://www.gmmstudios.com/Pictures/finaltopbackground.gif); HEIGHT: 83px
}
#nav {
BACKGROUND-IMAGE: url(http://www.gmmstudios.com/Pictures/Finalleftbackground.gif); POSITION: absolute; WIDTH: 160px; TOP: 83px; LEFT: 0px
}
#nav TABLE TR {
HEIGHT: 40px
}
#content_pane {
PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #00abea; PADDING-LEFT: 160px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
#content-bg {
PADDING-BOTTOM: 10px; BACKGROUND-COLOR: white
}
#content {
PADDING-BOTTOM: 0px; PADDING-LEFT: 50px; WIDTH: 500px; PADDING-RIGHT: 0px; BACKGROUND: url(http://www.gmmstudios.com/Pictures/Background.gif) no-repeat; PADDING-TOP: 50px
}
#content H1 {
FONT-FAMILY: Impact, Haettenschweiler, Arial, "Arial Black"
}
#content H2 {
FONT-FAMILY: Impact, Haettenschweiler, Arial, "Arial Black"
}
#content H3 {
FONT-FAMILY: Impact, Haettenschweiler, Arial, "Arial Black"
}
#content H4 {
FONT-FAMILY: Impact, Haettenschweiler, Arial, "Arial Black"
}
#content H5 {
FONT-FAMILY: Impact, Haettenschweiler, Arial, "Arial Black"
}
#content H6 {
FONT-FAMILY: Impact, Haettenschweiler, Arial, "Arial Black"
}
#content A IMG {
FILTER: alpha(opacity='95'); opacity: 0.95
}
#content A:hover IMG {
FILTER: alpha(opacity='100'); opacity: 1
}
#page {
height: 100%;
}

What i've done is take off the height on the nav as its not needed, and told the HTML / Body to have 100% height.

You might want to play about with this to get it just as you want, but this should hopefully help you on your way. Hope this helps :)