CHAPTER 5 ■ BOX MODELS EXTENTSStretched
Problem You want to stretch the width or height of an element to fill the width or height of its
container. In other words, you want to stretch the outer box of an element to the
sides of its container.
Solution You can stretch a box by applying width:auto, width:100%, height:auto, or
height:100% to different types of boxes.
When using width:auto or height:auto, a browser calculates the width and height
of stretched elements from the outside in. A browser starts with the inner box of the
parent, and subtracts the stretched element’s margins, borders, and padding to
calculate its inner box. Contrast this with sized and shrinkwrapped elements, which
are sized from the inside out.
Use width:auto to stretch the width of a block to the sides of its parent.
Use width:auto, left:0, and right:0 to stretch an absolute element to the left and
right sides of its closest positioned ancestor.
Use height:auto, top:0, and bottom:0 to stretch an absolute element to the top
and bottom of its closest positioned ancestor.
Use width:100% to stretch a table, a float, or an inline block. This works as long as
the box does not have horizontal margins. Otherwise, it overflows its parent, and the
stretch effect is lost. Stretched floats and inline blocks also overflow their parent
when they have horizontal borders or padding.
Use height:100% to stretch the height of inline blocks, blocks, tables, and floats to
the height of their containers. If the stretched element is not the first and only child
in its container, this technique will overflow the container.
Patterns Stretched Inline-block Element
INLINE-BLOCK-SELECTOR { width:100%; height:100%; }^
Stretched Static Block Element^
BLOCK-SELECTOR { width:auto; height:100%; }^
Stretched Table^
TABLE-SELECTOR { width:100%; height:100%; }^
Vertically Stretched Absolute Element^
SELECTOR { height:auto; top:0; bottom:0; position:absolute; }^
Horizontally Stretched Absolute Element^
SELECTOR { width:auto; left:0; right:0; position:absolute; }^
Stretched Float^
SELECTOR { width:100%; height:100%; float:LEFT_RIGHT; }^