CSS Height — TutorialBrain

CSS Height Examples

The entire div has width of 500px & height of 280px while the table height is set as 150px -

Element	Description
div	div has a width of 500px and height of 280px in lightblue background with green border-width of 2px
p	Paragraph has a width of 300px & height of 60px in lightblue background with red border-width of 3px

This paragraph has the width property and height property as mentioned above

CSS Height property

“css height” property sets the height of the elements. The important height elements are –

Border Height
CSS max-height
CSS min-height
div height

CSS div height

CSS height property sets the height of the div(div are basically division or section).

You can also set the maximum & minimum height of the div using max-height and min-height property.

Example of CSS div height

<style>
.div_height {
   width:500px;
   max-width:600px;
   min-width:200px;   
   height:150px;
   max-height:180px;
   min-height:80px;
   background-color: #919653;
} 
</style>

CSS Layout - max-height & min-height

The height of the element is the actual height of the element under normal circumstances.

The max-height is the maximum height of the element in a particular device.
The min-height is the minimum height of the element in a particular device.

max-height & min-height are important when the size of the device is different from a normal computer. For example – Tablets, mobile Devices etc.

Note/Info:

Normally,

max-height >= height
min-height <= height

The standard rules are-

If max-height >= height
For Example:
height: 120px;
max-height:150px;

then, normal height of element is 120px but maximum height of element is 150px.

If max-height < height
For Example:
height: 150px;
max-height:120px ;

then, the normal height of the element is 120px and it is maximum height also.

If min-height <= height
For Example:
height: 140px;
min-height:90px;

then, normal height of element is 140px but minimum height element is 90px.

If min-height > height
For Example:
height: 70px;
min-height :110px ;

then, the normal height of the element is 110px and it is minimum height also.

Follow @tutorial_brain

Interview Questions

1. How can we set Table Height?

Table height is set using height property.

Example:
In Inline CSS:

<table style="height:400px">

Similarly, you can set the height for the table using a class or id as well. You can also set the Table column height using width property.

2. What are other important height properties?

Some other CSS height properties are:

css:font height
css:text height
css:image gallery different heights
css:display height
css:image responsive height and width

3. What is max-height and min-height in CSS?

Min-height defines the minimum height of the specified device.
Syntax:

width: 200px;
max-width:180px ;

Max-height defines the maximum height of the specified device.
Syntax:

.div_height {
   height:150px;
   max-height:180px;
   min-height:80px;
  border:2px solid red;  
}

Max-height and min-height are a very important property to create a responsive website.