| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| <html> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> |
| |
| <style type="text/css" media="screen"> |
| |
| * { |
| margin: 0; |
| padding: 0; |
| } |
| |
| /* -------- Test case ---------- */ |
| |
| #warper { |
| margin: 40px; |
| width: 400px; |
| border: 3px solid blue; |
| position: relative; |
| height: auto; |
| } |
| |
| .fill { |
| height: 40px; |
| margin-bottom: 10px; |
| background-color: green; |
| } |
| |
| #abs_100_height { |
| height: 100%; |
| width: 200px; |
| position: absolute; |
| top: 0; |
| left: 0; |
| border: 3px solid yellow; |
| } |
| |
| #abs_100_height div { |
| height: 100%; |
| border: 3px dashed red; |
| } |
| |
| /* -------- Test case ends ---------- */ |
| |
| #desc { |
| margin: 100px 0 0 50px; |
| } |
| |
| h3 { |
| margin-bottom: 5px; |
| } |
| |
| ul { |
| list-style-position: inside; |
| margin-bottom: 20px; |
| } |
| |
| li { |
| margin-bottom: 7px; |
| } |
| |
| p { |
| margin-bottom: 20px; |
| } |
| |
| </style> |
| |
| </head> |
| |
| <body> |
| |
| <!-- Test case --> |
| |
| <div id="warper"> |
| |
| <div class="fill"></div> |
| <div class="fill"></div> |
| <div class="fill"></div> |
| |
| <div id="abs_100_height"> |
| <div id="inner_abs_100_height"></div> |
| </div> |
| |
| </div> |
| |
| <!-- Test case ends --> |
| |
| <div id="desc"> |
| |
| <h3>Test case:</h3> |
| <ul> |
| <li> |
| Blue div has 400px width, dynamic height, and position: relative. |
| </li> |
| <li> |
| Inside blue div there are 3 other div with height: 40px (and has some bottom margin..)<br> |
| the height of the blue div expands with the green divs inside.. |
| </li> |
| <li> |
| Yellow div has position absolute (and positioned in the top left corner of the blue div)<br> |
| it's height set to 100%<br> |
| the height of the yellow div now equals with the height of the blue div |
| </li> |
| <li> |
| Red div is inserted into the yellow div, and it's height set to 100% |
| </li> |
| </ul> |
| |
| <h3>Problem:</h3> |
| <p> |
| The height of the red div <strong>should equals</strong> to the height of the blue (and yellow) div.<br> |
| It works right with Opera 9.2, Firefox 2, Camino 1.0.4 and Internet Explorer 7. |
| </p> |
| |
| <h3>Workaround:</h3> |
| <p> |
| If you set position absolute to the red div, it's height will expands along with the blue div. |
| </p> |
| |
| <h3>Result:</h3> |
| <div id="result"></div> |
| </div> |
| |
| <script> |
| function gebi(id) |
| { |
| return document.getElementById(id); |
| } |
| |
| function addResult(color, message) |
| { |
| var result = gebi("result"); |
| var div = document.createElement("div"); |
| div.style.color = color; |
| div.appendChild(document.createTextNode(message)); |
| result.appendChild(div); |
| } |
| |
| var blueHeight = gebi("warper").offsetHeight; |
| var yellowHeight = gebi("abs_100_height").offsetHeight; |
| var redHeight = gebi("inner_abs_100_height").offsetHeight; |
| if (redHeight == yellowHeight) |
| addResult("green", "PASS: redHeight == yellowHeight"); |
| else |
| addResult("red", "FAILED: redHeight (" + redHeight + ") != yellowHeight (" + yellowHeight + ")"); |
| if (redHeight == blueHeight) |
| addResult("green", "PASS: redHeight == blueHeight"); |
| else |
| addResult("red", "FAILED: redHeight (" + redHeight + ") != blueHeight (" + blueHeight + ")"); |
| |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| </script> |
| |
| </body> |
| </html> |
