multicol-span-all-children-height-003-ref.html (965B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Multi-column Layout Test Reference: Test a multi-column container with percentage height children</title> 5 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 6 <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> 7 8 <style> 9 article { 10 width: 400px; 11 height: 200px; 12 background-color: lightgreen; 13 border: 5px solid purple; 14 } 15 div.columns { 16 column-count: 2; 17 } 18 div.block1 { 19 background-color: yellow; 20 height: 600px; 21 } 22 div.spanner { 23 height: 50px; 24 background-color: lightblue; 25 } 26 div.block2 { 27 background-color: yellow; 28 height: 200px; 29 } 30 </style> 31 32 <article> 33 <div class="columns" style="height: 200px;"> 34 <div class="block1">block1</div> 35 </div> 36 <div class="spanner">spanner</div> 37 <div class="columns" style="height: 1px;"> 38 <div class="block2">block2</div> 39 </div> 40 </article> 41 </html>