Height with Percentage

This example demonstrates how to set the height of an element using a percent value.

HTML file: Displayed by browser:
<style>
html, body {
   height: 100%;
}
img.normal {
   height: auto;
}
img.big {
   height: 10%;
}
</style>
<body>
<img class="normal" src="../html_beg/images/smiley.gif" width="32" height="32">
<br /><img class="big" src="../html_beg/images/smiley.gif" width="32" height="32">
</body>

In order to set a height by percentage, you must let the browser know the height of the parent (html, body).

Back button Table of Contents Next button