page-container-010.xht (1448B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: Paged Media Height (percent)</title> 5 <link rel="author" title="Melinda Grant" href="mailto:melinda.grant@hp.com" /> 6 <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-box" /> 7 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-abspos" /> 8 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property" /> 9 <link rel="help" href="http://www.w3.org/TR/css3-page/#page-box-page-rule" /> 10 <meta name="flags" content="paged" /> 11 <meta name="assert" content="For HTML documents in paged media, when the HTML and BODY elements have heights of 100%, a percentage height on a child of BODY is relative to the page area height. " /> 12 <style type="text/css"> 13 14 html, body { 15 height: 100%; 16 margin: 0; 17 padding: 0; 18 } 19 div { 20 height: 50%; 21 border-bottom: 10px red solid; 22 } 23 .test { 24 position: absolute; 25 top: 50%; 26 bottom: auto; 27 right: 0; 28 left: 0; 29 background: blue; 30 border: 0; 31 height: 10px; 32 } 33 p { 34 margin-top: 0; 35 } 36 </style> 37 </head> 38 <body> 39 <div> 40 <p> 41 This test produces one page on paged media. 42 </p> 43 <p> 44 There is a horizontal blue line, half way down the page. There is no red on 45 the page.</p> 46 <div class="test"></div> 47 </div> 48 </body> 49 </html>