CHAPTER 5 ■ BOX MODELS EXTENTSHeight
Problem You want to set the height of an element to size it, shrinkwrap it, or stretch it.
Solution CSS provides the height property for this purpose. This design pattern is an introduction to
the Sized, Shrinkwrapped, and Stretched design patterns. The purpose of this design pattern is
to compare how height applies to all six main types of boxes: inline, inline-block, block, table,
absolute, and floated. This comparison makes it easy to choose the proper combination of
height, element, and display box to create the layout you want.
height works on all types of elements except for inline elements. height works differently
depending on the type of element and whether it is positioned or floated. height is completely
independent from width. height:auto is the default.
height:auto height:auto vertically shrinkwraps the following boxes: inline, inline-block, block, floated,
table, and absolute (when both top and bottom are auto). height:auto also vertically stretches
an absolute box when top and bottom are both set to a value, such as 0. This is the best way to
vertically stretch a box because height:100% has limitations, but it is available only for
absolute boxes.
height:+VALUE You can size an element by assigning pixels, ems, a percentage, or another fixed measurement
to height. Fixed heights may not be user-friendly when the viewport is much larger or much
smaller than expected. Percentages are more flexible because they can scale to the viewport.
height:100% height:100% stretches an element to the height of its parent, but unlike auto, height:100% has
limitations. A browser does not automatically adjust the height to keep the element stretched.
An element’s vertical margins, borders, or padding can expand its height beyond the height of
the parent.
Pattern SELECTOR { height:+VALUE; }^
Location height applies to all elements except for inline elements.
Tips A browser ignores height on a static inline element because font and font-size determine
the height of its text, which sets the element’s height.
Tables stretched using height:100% work almost as well as vertically stretched absolute
elements. When you assign borders or padding to a table, the outer box of a table does not
expand, and the table does not overflow its parent. This is because borders and padding are
rendered on the inside of the table and do not expand its outer box. On the other hand, a
margin assigned to a table will reposition the stretched table and overflow its parent.
Example The example illustrates all ways of using height to create vertically shrinkwrapped, stretched,
and sized elements. I omitted nonessential CSS rules and the HTML code to fit the example on
one page. The text in the element is the name of its class. The replaced element is an image of
a star.
Related to Sized, Shrinkwrapped, Stretched; Static, Absolute, Float (Chapter 7); Table (Chapter 15)