The CSS height property settles the height of an element.
The CSS min-height and max-height properties override the width property.
Demo:
Click the “Try it” button to change the height of the DIV element:
Example
Note: the height of an element does not include margins, padding and borders.
Syntax:
height: auto|value;auto (default) – the height is calculated by the browser.
value – specifies the width in px, %, etc (read also Units in CSS).
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
height: 150px;
width: 200px;
border: 1px solid #333;
}
.child {
height: 50%;
width: 50%;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">I'm the 50% height of my parent.</div>
</div>
</body>
</html>Output:
I’m the 50% height of my parent.
Enjoy coding!
Read also: