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>