”;
The height property sets the height of an element”s content area. In case, the box-sizing is set to border-box, the property height sets the height of the border area.
The value specified by the height property gets oevrriden by the values defined by min-height and max-height properties.
Possible Values
-
length − A specific length value such as pixels (px), centimeters (cm), inches (in), etc.
-
percentage − A percentage of the height of the containing element.
-
auto − The browser will calculate the height automatically based on the content. It is the default value.
-
max-content: Defines the intrinsic preferred height.
-
min-content: Defines the intrinsic minimum height.
-
fit-content: Available space will be used by box, but never exceeds the max-content.
-
fit-content (<length-percentage>): Fit-content formula is used, i.e, min(max-content, max(min-content, <length-percentage>)).
-
clamp(): Enables selection of a middle value within a range of values, specified between minimum and maximum height.
Negative values like height: -200px are not accepted.
Applies to
All the HTML elements except non-replaced inline elements, table columns, and column groups.
DOM Syntax
object.style.height = "100px";
CSS Height – Length Unit
Here is an example of adding height to a div element in length units:
<html> <head> <style> div { border: 1px solid black; margin-bottom: 5px; } div.a { height: 100px; background-color: rgb(230, 230, 203); } div.b { height: 2.5in; background-color: rgb(230, 230, 203); } </style> </head> <body> <div class="a">This div element has a height of 100px.</div> <div class="b">This div element has a height of 2.5 inches.</div> </body> </html>
CSS Height – Percentage value
Here is an example of adding height to a div element in percentage values:
<html> <head> <style> div { border: 1px solid black; margin-bottom: 5px; } div.a { height: 80%; background-color: rgb(230, 230, 203); } div.b { height: 120%; background-color: rgb(236, 190, 190); } </style> </head> <body> <div class="a">This div element has a height of 80%.</div> <div class="b">This div element has a height of 120%.</div> </body> </html>
CSS height – auto value
Here is an example of adding height to a div element set as auto:
<html> <head> <style> div.auto { height: auto; background-color: yellow; padding: 20px; margin-bottom: 5px; } </style> </head> <body> <div class="auto">This div element has a height set as auto.</div> </body> </html>
CSS Height – Using max-content and min-content
Here is an example of height equal to max-content and min-content:
<html> <head> <style> div { border: 1px solid black; margin-bottom: 5px; } div.c { height: max-content; background-color: bisque; } div.d { height: min-content; background-color: darkseagreen; } </style> </head> <body> <div class="c">This div element has a height as max-content. This div element has a height as max-content. This div element has a height as max-content. This div element has a height as max-content. This div element has a height as max-content.</div> <div class="d">This div element has a height of min-content.</div> </body> </html>
CSS Height – Image
Here is an example of adding height to an image:
<html> <head> <style> .demoImg { margin-top: 15px; height: 200px; margin-right: 0.5in; } </style> </head> <body> <img class="demoImg" src="images/scancode.png" alt="image-height"> </body> </html>
CSS Height – Using clamp()
Here is the example where clamp() function is used for setting height:
<html> <head> <style> p{ display: inline-flex; border: 1px solid black; background-color: yellow; height: clamp(20px, 100px, 180px); width: clamp(50px, 100px, 200px); padding: 1em; margin: 2em; } </style> <body> <div> <p>The clamp function is used for height & width, where the background color is selected for the value between the min and max ranges of height and width.</p> </div> </body> </html>
CSS Height – Related Properties
Following is the list of related CSS properties of height:
property | value |
---|---|
max-height | Sets an upper bound on the height of an element. |
min-height | Sets a lower bound on the height of an element. |
min-content | Sets intrinsic minimum height of the content. |
max-content | Sets intrinsic maximum height of the content. |
fit-content | Fits the content depending on the available size. |
fit-content() | Clamps a given size based on the formula min(maximum size, max(minimum size, argument)). |
”;