According to specifications for
height the element's containing box needs to have an explicit
height in order for percentage height to work on the element (i.e. a numerical value of
100% height used on all parent containing boxes).
However why do the same rules not seem to apply for percentage
widths? When I set a percentage
width on an element with a containing box that has no explicit
width, it still seems to change the width of the element. (see example)
width: 30%; /* the '.second' box becomes narrower! */
height: 40%; /* <-- doesn't have any effect */
Best How To :
Non-replaced block-level elements which are in normal flow take the
width of their parent.
Well, that's a lie-to-children!
In order to understand what happens under the hood, we should start from how
width of a non-replaced block-level element is calculated.
10.3.3 Block-level, non-replaced elements in normal flow
The following constraints must hold among the used values of the other properties:
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
[...] If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.
Due to the fact that the initial value of
width property is
width of a block-level element would be the same as its containing block.
<html> is a block-level element and it lives in the initial containing block.
The initial containing block is a rectangular box which takes the width of the viewport. Hence the width of
<html> element would be equal to the width of the viewport.
On the other hand, the containing block of
<body> element is generated by
<html>. Therefore they would have equal widths as well.
<body> itself establishes a containing block for its block-level children. And that's why a
<div> element in normal flow will take the width of the viewport.
W3C indicates it better:
With no positioning, the containing blocks (C.B.) in the following document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<TITLE>Illustration of containing blocks</TITLE>
<P id="p1">This is text in the first paragraph...</P>
<P id="p2">This is text <EM id="em1"> in the
<STRONG id="strong1">second</STRONG> paragraph.</EM></P>
are established as follows:
For box generated by C.B. is established by
html initial C.B. (UA-dependent)
However that is not true for
height of non-replaced block-level elements (which are still in normal flow!):
10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'
[...] If 'height' is 'auto', the height depends on whether the element has any block-level children and whether it has padding or borders.
[...] Only children in the normal flow are taken into account (i.e., floating boxes and absolutely positioned boxes are ignored, and relatively positioned boxes are considered without their offset).
The initial value of
auto, therefore if the block-level element doesn't have any block-level children, padding or border, the computed value of
height would be
That's true even for