Closed Bug 277333 Opened 20 years ago Closed 20 years ago

dreamlyrics.co.uk - percentage height troubles

Categories

(Tech Evangelism Graveyard :: English Other, defect)

Product:
Tech Evangelism Graveyard
Component:
English Other
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: daniel, Unassigned)

References

(
URL
)

Details

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0

The referenced page uses a <div> container box with height set to 100% as an
outer padding to another <div> and <table> text box. The inner content comprises
more vertical area than my browser window. On scrolling down, I see the outer
<div> seems to have retained a fixed size, while the inner table has expanded. 
Text following the outer container (copyright notice) appears on top of text
from the inner text box.

A much more simplified testcase to reproduce the problem follows. I changed
height to 10% to reduce the necessary scrolling. The solid border makes it more
obvious what is occurring:

<HTML><HEAD></HEAD><BODY>
    <div style="height:10%; border: solid;">
             This text is inside the div.<br>1<br>2<br>3<br>4<br>5
    </div>
    This text follows the div.
</BODY></HTML>

Reproducible: Always

Steps to Reproduce:
1. Visit the referenced URL or view the above test case in Firefox
2. If your screen has much more vertical space than mine (affecting calculation
of percent height) try a smaller browser window, or smaller height %.


Actual Results:  
Text following the div (outside the "box") appears on top of text inside the div
(which scrolls past the box)

Expected Results:  
In IE6, the percentage size of the <div> is treated as a minimum.  If the
content is larger than that, the height increases to accommodate the content. 
Viewing the  referenced URL or the test case in IE6 shows the intended results.

This might be the bug referenced in 10212 and other bugs involving "unspecified
behavior" for height=100%. Most of these other bugs were for more complicated
situations, however.
After doing more research, I found the "min-height" attribute for <div> which
gives the expected behavior. I have notified the website author and recommended
he change.  Given that an acceptable "standards-based" alternative to my
expected behavior is available, this can probably be declared as another example
of different interpretations of non-standard HTML.
Webmaster of referenced URL has changed their page.  Removing "height=100%" in
its entirety now gives desired results.
Assignee: firefox → english-other
Component: General → English Other
Product: Firefox → Tech Evangelism
QA Contact: firefox.general → english-other
Summary: Div with height in percent does not expand with content → dreamlyrics.co.uk - percentage height troubles
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago
Resolution: --- → FIXED
Product: Tech Evangelism → Tech Evangelism Graveyard
You need to log in before you can comment on or make changes to this bug.