revision:
- sets the height of an element. The height of an element does not include padding, borders, or margins!
If "height: auto;" the element will automatically adjust its height to allow its content to be displayed correctly.
If height is set to a numeric value (like pixels, (r)em, percentages) then if the content does not fit within the specified height, it will overflow. How the container will handle the overflowing content is defined by the "overflow property".
Note: The "min-height" and "max-height" properties override the height property.
Property values:
auto : the browser calculates the height. This is default
length : defines the height in px, cm, etc.
% : defines the height in percent of the containing block.
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
example: height property
<div>
<h4>height: auto (default)</h4>
<div class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at
erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida
libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.
Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin
felis neque sit amet erat.</div>
<h4>height: 3vw</h4>
<div class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at
erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida
libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.
Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin
felis neque sit amet erat.</div>
</div>
<style>
div.a {height: auto; border: 0.1vw solid black;}
div.b {height: 3vw; border: 0.1vw solid black;}
</style>