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
Change the height of element using CSS
The CSS height property is used to set the height of an element. You can also use the scaleY() transform function to scale the height proportionally without changing the actual height value in the document flow.
Syntax
/* Using height property */
selector {
height: value;
}
/* Using scaleY() transform */
selector {
transform: scaleY(factor);
}
Method 1: Using Height Property
The most direct way to change element height is using the height property −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 50px;
background-color: #4CAF50;
margin: 10px;
display: inline-block;
}
.tall-box {
height: 100px;
background-color: #2196F3;
}
</style>
</head>
<body>
<div class="box">Normal</div>
<div class="box tall-box">Tall</div>
</body>
</html>
Two boxes appear side by side: a green box (50px height) labeled "Normal" and a taller blue box (100px height) labeled "Tall".
Method 2: Using scaleY() Transform
The scaleY() function scales the height visually without affecting document flow. Here, n is a number representing the scaling factor −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
margin: 20px;
}
.box {
width: 100px;
height: 80px;
background-color: #FF5722;
margin: 10px;
display: inline-block;
color: white;
text-align: center;
line-height: 80px;
}
.scaled-down {
transform: scaleY(0.5);
background-color: #9C27B0;
}
.scaled-up {
transform: scaleY(1.5);
background-color: #607D8B;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Original</div>
<div class="box scaled-down">0.5x</div>
<div class="box scaled-up">1.5x</div>
</div>
</body>
</html>
Three boxes appear: an orange box at original height, a purple box scaled to half height (0.5x), and a gray box scaled to 1.5 times the original height.
Conclusion
Use the height property to change actual element dimensions, or scaleY() to visually scale height while preserving document flow. The scaleY() method is useful for animations and visual effects.
Updated on: 2026-03-15T12:07:14+05:30
167 Views
Advertisements