page-container-010

Paged Media Height (percent)

WeasyPrint

This browser

Flags
paged
Assertion
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.

Source

 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>