/    Sign up×
Community /Pin to ProfileBookmark

set <div> height according to content outside of tag??

Copy linkTweet thisAlerts:
Sep 02.2003

I have a left menu setup in CSS & HTML using the <div> tag. Without using tables, i’d like the left menu to appear vertically as long as the page, no matter how much content on the right side the user needs to scroll through.

Is there a way to have the height of my left menu appear relative to the content [I]outside[/I] of the tag?

If I use 100% as height, it naturally assumes I mean the content of the <div> tag.

Here’s my CSS:
#left_menu { float: left; position: absolute; background-color: #EEEEEE; margin: 0px; padding-top: 20px; width: 15%; height: 100%; }

any suggestions? help a newbie out?
?

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@DaveSWSep 02.2003 — What I normally do for mine is use use the body css background property, have a width specified of 150px; create a gif, 150px wide by 1px high in the color I want, and then use

body{

background: url(back.gif) left repeat-y;

}


There's an example on www.tollgatesecurity.co.uk or http://www.emdevelopments.co.uk/PPC/PPC7/index.htm

alternatively, you need to specify height:100% for every containing element:

html,body{

height: 100%;

}

#left_menu { float: left; position: absolute; background-color: #EEEEEE; margin: 0px; padding-top: 20px; width: 15%; height: 100%; }

That may also work if you need a % wide menu
Copy linkTweet thisAlerts:
@wublubauthorSep 02.2003 — That's an EXCELLENT idea for the gif background!

I'll give it a try. Thanks!

wublub
×

Success!

Help @wublub 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.17,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

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