| <!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">× 120%</div> |
| </div> |
| |
| <div class="spacer"></div> |
| |
| <div class="blue explicit-height"> |
| 50px |
| <div class="light-blue percentage-height">× 120%</div> |
| </div> |
| |
| <div class="spacer"></div> |
| |
| <div class="indigo"> |
| auto |
| <div class="blue percentage-height"> |
| × 120% |
| <div class="light-blue percentage-height">× 120%</div> |
| </div> |
| </div> |
| |
| <div class="spacer"></div> |
| |
| <div class="indigo explicit-height"> |
| 50px |
| <div class="blue percentage-height"> |
| × 120% |
| <div class="light-blue percentage-height">× 120%</div> |
| </div> |
| </div> |
| </body> |
| </html> |
