min-height-percentage-003

min-height - 100% of the initial containing block's height

WeasyPrint

This browser

Assertion
The initial containing block has the dimensions of the viewport. A percentage height on the root element is relative to the initial containing block. A 'min-height: 100%;' of the document root element should use all of the document root element's height. A percentage for 'min-height' is calculated with respect to the height of the generated box's containing block.

Source

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3 
 4  <head>
 5 
 6   <title>CSS Test: min-height - 100% of the initial containing block's height</title>
 7 
 8   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
 9   <link rel="author" title="Bruno Fassino" href="fassino(at)gmail.com">
10   <link rel="author" title="Alan Gresley" href="alan{at}css-class.com">
11   <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">
12   <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">
13   <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">
14   <meta content="The initial containing block has the dimensions of the viewport. A percentage height on the root element is relative to the initial containing block. A 'min-height: 100%;' of the document root element should use all of the document root element's height. A percentage for 'min-height' is calculated with respect to the height of the generated box's containing block." name="assert">
15   <meta content="" name="flags">
16 
17   <style type="text/css">
18   html, body
19   {
20   background-color: red;
21   height: 100%;
22   }
23 
24   body, p
25   {
26   margin: 0px;
27   }
28 
29   p
30   {
31   background-color: lime;
32   min-height: 100%;
33   }
34   </style>
35 
36  </head>
37 
38  <body>
39 
40   <p>The background of this page should be bright green. There should be no red and no vertical scrollbar.</p>
41 
42  </body>
43 </html>