Nested DIVs with height 100% not working, causes to effects

RESOLVED INVALID

Status

()

Core
Layout: Block and Inline
RESOLVED INVALID
15 years ago
15 years ago

People

(Reporter: Rocky Moore, Unassigned)

Tracking

({testcase})

Trunk
x86
Windows XP
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

15 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.5a) Gecko/20030718
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.5a) Gecko/20030718

A div with a height of 100% nested in another div does not render correctly.  If
the embedded div has several paragraphs of content and the containing div has
not specified a height, the embedded div's content will be displayed beyond both
div's area.  If the bounding div has a set height that is larger than the
embedded div's content, the embedded div only fills the are that its content fills.

Reproducible: Always

Steps to Reproduce:
<div style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px;
PADDING-TOP: 5px; HEIGHT: 100px; BACKGROUND-COLOR: lightblue">Div1<div
style="BACKGROUND-COLOR: floralwhite">Div2</div><div style="WIDTH: 100%; HEIGHT:
100%; BACKGROUND-COLOR: honeydew">Div3</div></div>

Actual Results:  
Mozilla gives a form of staggered third div.

Expected Results:  
This should produce a div with a single line div embedded and a second embedded
div that spans the rest of the containing div's height.  Works properly in IE
and Opera.

Comment 1

15 years ago
Created attachment 128432 [details]
testcase

Comment 2

15 years ago
This is not a blocker bug.
Opera 7 renders this exactly the same as Mozilla 20030721 PC/WinXP.  I only see
a different rendering in IE6.

Mozilla's rendering looks right to me.  DIV3's height is 100%, meaning 100% of
the height of the containing block DIV1.  DIV1 is explictly 100px, so DIV3 is
100% of that, or 100px.  That's how it rendered.

Resolving invalid.  If I've misinterpreted or gotten something wrong here,
please reopen bug.
Severity: blocker → normal
Status: UNCONFIRMED → RESOLVED
Last Resolved: 15 years ago
Keywords: testcase
Resolution: --- → INVALID
verified invalid.
Status: RESOLVED → VERIFIED
(Reporter)

Comment 4

15 years ago
I do not know about version 20030721 as I do not know of a way to obtain it, 
but in 1.5a (2003071814) there is a difference between Mozilla and IE5, IE6 and 
Opera 7.  I captured the output of these browsers and the result along with the 
code is at:

http://rjsoft.com/mozilla/test.htm

You can see that Opera 7 and both versions of IE generate the exact same 
results while Mozilla is different.

Also with padding and 100% width on Div 2 it will make Div 2 extend beyond Div 
1.

Status: VERIFIED → UNCONFIRMED
Resolution: INVALID → ---
http://rjsoft.com/mozilla/test.htm has a doctype that puts all the browser
involved into quirks mode (unlike the testcase Bill attached, which puts them
all into standards mode).

Now all the browsers introduce certain bugs in their rendering in quirks mode;
looks like Opera introduces a bug in its sizing of blocks (to render like IE,
which renders incorrectly in both modes).

The determining factor for making something a quirk in Mozilla is "does it break
a lot of pages on the web?"

This issue does not, hence we render per standard in both modes.

For more details on rendering modes, see
http://www.mozilla.org/docs/web-developer/quirks/
 
As for getting current versions, see
ftp://ftp.mozilla.org/pub/mozilla/nightly/latest/
Status: UNCONFIRMED → RESOLVED
Last Resolved: 15 years ago15 years ago
Resolution: --- → INVALID
(Reporter)

Comment 6

15 years ago
<<unlike the testcase Bill attached, which puts them
all into standards mode>>

Sorry, that version does the exact same thing and DOES generate the same bogus 
rendering unlike other browsers.

Don't worry, I am gone now, will not waste any more time here.

You need to log in before you can comment on or make changes to this bug.