CODEWITHSUNDEEP
css
Turner Hayes
Turner Hayes

Reputation: 1944

Percentage height does not have any effect

I'm trying to animate an accordion-style list, but not matter what percentage I give to the child, it shows up completely (even at 0%). See this JSBin--if you change the "0%" to "0" (or "0px"), it hides just fine, but at 0% (or 1%, or 50%, or 100%, etc.) the child is fully visible. The percentages only seem to work if you give the parent <li> an explicit pixel height (but that doesn't play very well with animating the expand of the child).

I can understand how percentage heights might behave funny when the parent height is not specified, but 0% should be 0px all the time. That's what I don't understand.

Upvotes: 1

Views: 126

Answers (2)

Sobin Augustine
Sobin Augustine

Reputation: 3765

The height in percentage sets the height according to the height of the parent. If the parent height is not set, you need to specify the height of the parent.

documentation says

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.

So 0% height goes to height:auto; in this case.

Upvotes: 0

Marc Audet
Marc Audet

Reputation: 46785

According to the CSS specification:

http://www.w3.org/TR/CSS2/visudet.html#the-height-property

if a child element has a percentage height, and the height of its containing block is not explicitly set, then the child elment's height computes to auto, not 0px.

Note that if the child element in question is positioned absolute, other CSS rules come into play.

Upvotes: 1

Related Questions