blob: 968a95f337c4d49f324bac8762ee3bea3c03dd15 [file] [log] [blame]
<!DOCTYPE html>
<!--
| If the height of the containing block is not specified explicitly
| (i.e., it depends on content height), and this element is not absolutely
| positioned, the value computes to "auto".
| https://www.w3.org/TR/CSS21/visudet.html#the-height-property
-->
<html>
<head>
<style>
body {
color: #fff;
font-family: Roboto;
font-size: 25px;
font-weight: bold;
}
.light-blue {
background-color: #03a9f4;
display: inline-block;
}
.blue {
background-color: #2196f3;
display: inline-block;
}
.indigo {
background-color: #3f51b5;
display: inline-block;
}
.explicit-height {
height: 50px;
}
.percentage-height {
height: 120%;
}
.spacer {
height: 20px;
}
</style>
</head>
<body>
<div class="blue">
auto
<div class="light-blue percentage-height">&times; 120%</div>
</div>
<div class="spacer"></div>
<div class="blue explicit-height">
50px
<div class="light-blue percentage-height">&times; 120%</div>
</div>
<div class="spacer"></div>
<div class="indigo">
auto
<div class="blue percentage-height">
&times; 120%
<div class="light-blue percentage-height">&times; 120%</div>
</div>
</div>
<div class="spacer"></div>
<div class="indigo explicit-height">
50px
<div class="blue percentage-height">
&times; 120%
<div class="light-blue percentage-height">&times; 120%</div>
</div>
</div>
</body>
</html>