Example BODY with computed min-height 643px but computed height 154.5

NEW
Unassigned

Status

()

Core
DOM: CSS Object Model
9 years ago
4 years ago

People

(Reporter: Timothy Madden, Unassigned)

Tracking

({student-project})

Trunk
x86
Windows Vista
student-project
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

9 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

The DOM inspector for this page shows (on my 1280x800 screen with Firefox window maximized) a computed height for the BODY that is smaller than the computed min-height value.

I think the computed height should be at least equal, or larger, than the computed min-height.

The HTML element has min-height: 100% with 0 margin/border/padding.
The BODY element had min-height: 100% with 0 margin/border and some default 16px padding.

I run into this problem trying to create a fluid box that stays at the bottom of the window, or the bottom of the page if the page is longer than the window.

Reproducible: Always

Steps to Reproduce:
1. Unpack or copy/paste the attached web page files
2. Load the page in Firefox and maximize the window at an 800px height screen resolution.
3. Open DOM Inspector and check the computed min-height and the computed height for BODY element
Actual Results:  
min-height: 643px
height: 154.5px

Expected Results:  
min-height: 643px
height: 643px

index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <!-- vi:fenc=utf-8
    -->
    <head>
	<meta http-equiv="Content-Type"	   content="text/html; charset=UTF-8"/>
	<meta http-equiv="Content-Script-Type" content="text/javascript"/>
	<meta http-equiv="Content-Style-Type"  content="text/css"/>

	<title>Local Java docs index</title>
	<link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
	<ul>
	    <li>Java 2 Platform Micro Edition
		<ul>
		    <li><a href="J2ME/CLDC-1.0/Appendix2/Javadoc/index.html">CLDC-1.0</a></li>
		    <li><a href="J2ME/CLDC-1.1/Appendix2-javadocs/index.html">CLDC-1.1</a></li>
		    <li><a href="J2ME/MIDP-1.0/html/index.html">MIDP-1.0</a></li>
		    <li><a href="J2ME/MIDP-2.0/javadoc/index.html">MIDP-2.0</a></li>
		</ul>
	    </li>
	</ul>

	<p class="foot-note">
	    <a href="http://validator.w3.org/check?uri=referer"><img
		src="http://www.w3.org/Icons/valid-xhtml10-blue.png"
		alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
	</p>
    </body>
</html>

-------------------------------------------------------------------------------
style.css:
HTML
{
    margin: 0;
    border 0 none transparent;
    padding: 0;
    min-height: 100%;	/* percents from the initial containing block (the browser's window client area) */
}

BODY
{
    margin: 0;
    border: 0 none transparent;
    min-height: 100%;
}

.foot-note
{
    font-size: smaller;
    margin-bottom: 0;
    margin-top: auto;
}
(Reporter)

Comment 1

9 years ago
Created attachment 363470 [details]
The example page to reproduce the bug

Here are the files so you don't have to Copy/Paste
(Reporter)

Updated

9 years ago
Keywords: css2
This is a mass search for bugs which are in the Firefox General component, are
UNCO, have not been changed for 500 days and have an unspecified version. 

Reporter, can you please update to Firefox 3.6.10 or later, create a fresh profile, http://support.mozilla.com/en-US/kb/managing+profiles, and test again. If you still see the issue, please update this bug. If the issue is gone, please set the status to RESOLVED > WORKSFORME.
Whiteboard: [CLOSEME 2010-11-01]
(Reporter)

Comment 3

8 years ago
Created attachment 481468 [details]
Screenshot with the page and the height/min-height values shown in the DOM Inspector

I can still reproduce the bug with the same HTML example page and with Firefox 3.6.10 on Windows 7 64bit.

That is, the min-height for body is 841px, while the height is 154.5px (computed style).

I think the height should be at least equal, or larger, to the min-height.

My screenshot, with the computed values, is attached.

Updated

8 years ago
Component: General → DOM
Product: Firefox → Core
QA Contact: general → general
Whiteboard: [CLOSEME 2010-11-01]
Version: unspecified → 1.9.2 Branch
This is just a bug in getComputedStyle...  And the problem is that it shows a mix of used and computed values, which doesn't necessarily work well for percentage min-height.  We should probably not use the parent frame size as the percentage base there.
Status: UNCONFIRMED → NEW
Component: DOM → DOM: CSS Object Model
Ever confirmed: true
Keywords: css2 → student-project
Version: 1.9.2 Branch → Trunk
QA Contact: general → style-system

Comment 5

7 years ago
Here is an example of where the body element's min-height does not inherit from html element's actual height http://fiddle.jshell.net/vmwJ2/17/show/preview/ 

Webkit has the same bug: https://bugs.webkit.org/show_bug.cgi?id=26559
The rendering of the testcase linked in comment 5 is correct.
You need to log in before you can comment on or make changes to this bug.