Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
CSS height property
The CSS height property is used to set the height of an element. It determines how tall an element will be, and can accept various types of values including lengths, percentages, or keywords.
Syntax
selector {
height: value;
}
Possible Values
| Value | Description |
|---|---|
auto |
Browser calculates the height automatically (default) |
length |
Defines height in px, em, rem, cm, etc. |
% |
Defines height as a percentage of the parent element |
initial |
Sets the property to its default value |
inherit |
Inherits the value from parent element |
Example: Setting Fixed Height
The following example demonstrates how to set a fixed height using pixels ?
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background-color: #4CAF50;
border: 2px solid #333;
padding: 15px;
margin: 20px;
color: white;
}
</style>
</head>
<body>
<div class="box">
This box is 200px wide and 100px high
</div>
</body>
</html>
A green box with white text appears, measuring 200px in width and 100px in height, with a dark border and padding.
Example: Percentage Height
You can also set height as a percentage of the parent container ?
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 200px;
background-color: #f0f0f0;
border: 2px solid #333;
position: relative;
}
.child {
width: 80%;
height: 50%;
background-color: #FF6B6B;
margin: 10px;
color: white;
text-align: center;
line-height: 90px;
}
</style>
</head>
<body>
<div class="container">
<div class="child">50% Height</div>
</div>
</body>
</html>
A gray container box with a red child box inside it. The child box takes up 50% of the container's height (100px out of 200px).
Conclusion
The height property is essential for controlling element dimensions. Use fixed values for precise control or percentages for responsive designs that adapt to their parent containers.
Updated on: 2026-03-15T11:21:37+05:30
128 Views
Advertisements