<!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></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>

		</div>

	</body>
</html>