CSS – why doesn’t percentage height work?

css height width
Web_Designer picture Web_Designer · Apr 14, 2011 · Viewed 256.5k times · Source

How come a percentage value for height doesn’t work but a percentage value for width does?

For example:

<div id="working"></div>
<div id="not-working"></div>

#working{
    width:80%;
    height:140px;
    background:orange;
}
#not-working{
    width:80%;
    height:30%;
    background:green;
}

The width of #working ends up being 80% of the viewport, but the height of #not-working ends up being 0.

Answer

mu is too short picture mu is too short · Apr 14, 2011

The height of a block element defaults to the height of the block's content. So, given something like this:

<div id="outer">
    <div id="inner">
        <p>Where is pancakes house?</p>
    </div>
</div>

#inner will grow to be tall enough to contain the paragraph and #outer will grow to be tall enough to contain #inner.

When you specify the height or width as a percentage, that's a percentage with respect to the element's parent. In the case of width, all block elements are, unless specified otherwise, as wide as their parent all the way back up to <html>; so, the width of a block element is independent of its content and saying width: 50% yields a well defined number of pixels.

However, the height of a block element depends on its content unless you specify a specific height. So there is feedback between the parent and child where height is concerned and saying height: 50% doesn't yield a well defined value unless you break the feedback loop by giving the parent element a specific height.

Related questions

CSS: 100% width or height while keeping aspect ratio?

Currently, with STYLE, I can use width: 100% and auto on the height (or vice versa), but I still can't constrain the image into a specific position, either being too wide or too tall, respectively. Any ideas?

Read More
Div width 100% minus fixed amount of pixels

How can I achieve the following structure without using tables or JavaScript? The white borders represent edges of divs and aren't relevant to the question. The size of the area in the middle is going to vary, but it will …

Read More
Canvas is stretched when using CSS but normal with "width" / "height" properties

I have 2 canvases, one uses HTML attributes width and height to size it, the other uses CSS: <canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas> <canvas id="compteur2" style="width: 300px; height: 300px;" …

Read More