min-height 100% for <body> has no effect

RESOLVED INVALID

Status

()

RESOLVED INVALID
6 years ago
6 years ago

People

(Reporter: codable, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

6 years ago
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:11.0) Gecko/20100101 Firefox/11.0
Build ID: 20120312181643

Steps to reproduce:

Open this page:
<html>
        <head>
                <style> 
                        html, body { 
                                min-height: 100%;
                        }  
                        #a {
                                min-height: 100%;
                                background-color: #222222;
                        } 
                        #b1 { 
                        } 
                </style> 
        </head> 
        <body> 
                <div id="a"> 
                        <div id="b1"> 
                        </div>
                        <div id="b2">
                        </div> 
                </div> 
        </body>
</html>


Actual results:

<body>'s height is 0. div#a's height is 0.


Expected results:

both should have the height of the page as in chrome and safari.
(Reporter)

Updated

6 years ago
Version: 11 Branch → unspecified

Comment 1

6 years ago
This is no bug.

Heights that are defined in percentages become auto heights if the height of the parent element depends on its contents.

In other words: Because the actual height of the html element depends on the height of the body element, there is an unresolvable dependency (html's height depends on body, body's height depends on html; the same is true for body and #a). This is not allowed per CSS 2.1, so the %-height becomes height: auto;

If you add a doctype (recommended for better interoperability! - for example <!DOCTYPE html>) to your document, you'll notice that IE, Firefox and Safari/Chrome behave just the same correct way. Opera appears to have a bug, though. But, you should not depend on bugs.

If you replace min-height by height on html and body you should be able to get your desired layout.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.