blob: 3e23d276a1784642dc3014b0751b8ed97882b55a [file] [log] [blame]
<!DOCTYPE html>
<!--
| If the height of the child is a percent of the height of the containing
| block and the containing block's height is produced from top and bottom,
| the height of the child should be properly calculated.
| https://www.w3.org/TR/CSS21/visudet.html#the-height-property
| https://www.w3.org/TR/CSS21/visuren.html#propdef-top
| https://www.w3.org/TR/CSS21/visuren.html#propdef-bottom
-->
<html>
<head>
<style">
body {
background-color: #FFFFFF;
}
.container {
position: absolute;
height: 300px;
width: 100px;
}
.top-bottom {
background-color: #EA4335;
position: absolute;
top: 10px;
bottom: 0px;
left: 10px;
width: 100px;
}
.percent-height {
background-color: #4285F4;
height: 100%;
position: relative;
}
</style>
</head>
<body>
<div class="container">
<div class="top-bottom">
<div class="percent-height"></div>
</div>
</div>
</body>
</html>