1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
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: medium red solid;
22 }
23 .test {
24 position: absolute;
25 top: 49.5%;
26 bottom: 49.5%;
27 right: 0;
28 left: 0;
29 background: blue;
30 border: 0;
31 height: auto;
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>