EN
CSS - set element max height
0 points
In this article, we would like to show you how to set element max height using CSS.
Quick solution:
xxxxxxxxxx
1
.element {
2
max-height: 100px;
3
}
In this example, we use max-height
CSS property to set element maximum height to 100px
. If the height
property percentage value will be calculated to more than 100px
, the max-height
property will prevent the element from expanding vertically.
xxxxxxxxxx
1
2
<html>
3
<head>
4
<style>
5
6
body {
7
height: 200px;
8
}
9
10
div.element {
11
height: 90%; /* sets height to 90% of parent (body) height */
12
max-height: 100px;
13
background: orange;
14
}
15
16
</style>
17
</head>
18
<body>
19
<div class="element">Example text inside ...</div>
20
</body>
21
</html>