CSS can't seem to set height to 100% of parent container_问答_开发者

CSS can't seem to set height to 100% of parent container

开发者 https://www.devze.com 2023-03-13 09:56 出处：网络

I\'m wondering why the heig开发者_开发技巧ht: 100% on the li\'s in this does not set the height to the ul they\'re a child of.

相关专题：css

I'm wondering why the heig开发者_开发技巧ht: 100% on the li's in this does not set the height to the ul they're a child of.

http://homecoming.umd.edu/index2.html

?_?

You need to set an explicit non-percentage height on a parent element. You currently have height:100% on your <ul>, too, which you'll notice isn't doing anything. If it were working, your navigation would expand your whole page, because its parent is your wrapper div that contains a bunch of other stuff. However, if you set your <ul> to something like height:40px, the <li> will follow suit.

height:100% depends on an explicit height set somewhere in a parent element. If no height is ever set with anything other than percentages (or if every parent element all the way up to <body> and <html> doesn't have height:100% set), then it will never actually do anything, because it has no reference height to start from.

I'm not sure what other people are getting, but using FF4 with Firebug I can see that there is no height: 100%; for the li's. There is for the ul however and that seems to be working fine.

Maybe trying putting height: 100%; in your css file for #nav li. Also, there's a padding in there that may throw you off in the future. Be sure to look into that if it's giving you problems.

EDIT: This is what I'm seeing in Firebug for the #nav li:

#nav li {
    float: left;
    position: relative;
    width: 9.09%;
}

No mention of the height attribute.

This would fix it (it won't fix the overlap in 'Greek organizations' though)

#nav { height: 44px; }
#nav a { height: 30px; }

I was kinda hoping the height would be explicitly set by the height of the container. Like, in the event we ever needed a 100 word title for some godforsaken reason, it'd automatically do it.

If I'm understanding this correctly and this is the real reason you are asking this question, just set #nav to "height:auto;" and, if you want it to be at least a certain height use something like "min-height:44px;"

Height of 100% in CSS can be tricky sometimes, as it depends on the size of the parent containers. Here are some similar questions/answers that might help.