This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
spec:css3-regions:auto-height [2012/03/28 16:12] – vhardy | spec:css3-regions:auto-height [2012/03/29 14:50] – vhardy | ||
---|---|---|---|
Line 4: | Line 4: | ||
that illustrate how this model is used concretely. | that illustrate how this model is used concretely. | ||
- | == Example | + | == Use Case A : Single regions in normal flow with height: auto == |
< | < | ||
Line 28: | Line 28: | ||
</ | </ | ||
- | The intrinsic size of the regionA RFCB (RFCB-A) is computed | + | The intrinsic size of the regionA RFCB (RFCB-A) is resolved |
< | < | ||
Line 38: | Line 38: | ||
height computed to ' | height computed to ' | ||
RFCB-A. Assuming there is no break in the content, the used height will be that | RFCB-A. Assuming there is no break in the content, the used height will be that | ||
- | of the entire flow laid out in the RFCB-A width (because it is the first fragmented box) | + | of the entire flow laid out in the RFCB-A width (because it is the first |
+ | (http:// | ||
This yields the intrinsic height (e.g., 1000px). | This yields the intrinsic height (e.g., 1000px). | ||
</ | </ | ||
- | When layout happen, regionA will be layout where it's width is computed as that of any non-replaced | + | When layout happen, regionA will be laid out it's width is computed as that of any non-replaced |
block level element and its intrinsic height is 1000px and used as for any height computation of replaced elements. | block level element and its intrinsic height is 1000px and used as for any height computation of replaced elements. | ||
- | In our example, the regionA box will have used values | + | In our example, the regionA box will have used width and height |
- | | + | |
| | ||
+ | |||
+ | == Example B : two regions with height:auto in normal flow == | ||
+ | |||
+ | < | ||
+ | < | ||
+ | #article { | ||
+ | flow-into: article; | ||
+ | } | ||
+ | |||
+ | #article p: | ||
+ | region-break-after: | ||
+ | } | ||
+ | #regionA, #regionB { | ||
+ | flow-from: article; | ||
+ | } | ||
+ | |||
+ | #regionA { | ||
+ | width: 800px; | ||
+ | height: auto; | ||
+ | } | ||
+ | |||
+ | #regionB { | ||
+ | width: 400px; | ||
+ | height: auto; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | |||
+ | <div id=" | ||
+ | |||
+ | <div id=" | ||
+ | <div id=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | To resolve the ' | ||
+ | |||
+ | < | ||
+ | |||
+ | - Phase 1: layout regions using a used height of 0 for both regionA and regionB. | ||
+ | - Phase 2: layout the article flow content in regionA, then regionB: | ||
+ | - the fragment used for regionA is the content of #p1 because there is a break after that | ||
+ | | ||
+ | block level non-replaced element in the normal flow with overflow computing to visible. | ||
+ | This yields a used height (RIH-1) to tightly wrap #p1 on the vertical dimension. | ||
+ | - similarly, for regionB, the content of #p2 (the remainder of the flow) is | ||
+ | used when computing the used height (RIH-2) for RFCB-2. | ||
+ | </ | ||
+ | |||
+ | The RIH-1 and RIH-2 intrinsic heights are used during the layout of regions, before flowing named flow content into them. | ||
+ | |||
+ | |||
< | < | ||