/    Sign up×
Community /Pin to ProfileBookmark

A tricky height setting

Copy linkTweet thisAlerts:
Aug 14.2009

Hello.

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

[url]http://www.gmmstudios.com/[/url]

Here is my Work in progress site.

[url]http://patrickrauland.com/gmm/[/url]

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

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@catterzAug 14.2009 — I've noticed a bit of code in your stylesheet under #nav: [B]height: 1168px;[/B]

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).
Copy linkTweet thisAlerts:
@BFTrickauthorAug 14.2009 — 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.
Copy linkTweet thisAlerts:
@Andyram2kAug 16.2009 — Hi Bftrick,

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

[CODE]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%;
}[/CODE]

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 ?
×

Success!

Help @BFTrick spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...