Maximum Height
In this aticle we are going to learn about maximum height property, how we can set the maximum height of html element with a maximum height property in css to prevent the value of the height property from becoming less than maximum height.
We learnt about css in general, fonts, colors, background colors, borders, margin padding, float, width, minimum width, maximum width, height and minimum height in css so, we will be focusing on maximum height.
Maximum height
Maximu height is a css property used to set a height limit that the element can have. The element with maximum height can not have height larger than maximum height but can have the height smaller than maximum height.
We are going to give the div element maximum height of 190px, copy and paste below code.
<div style="background-color: yellow; max-height: 190px;">This is 190px maximum height of div element.</div>
So, we should have the following results.
We are going to increase the maximum height and we will set it to 200px, copy and paste below code.
<div style="background-color: purple; max-height: 200px;">This is 200px maximum height of div element.</div>
So, we should have the following results.
We are going to decrease the maximu height and we will set it to 100px, copy and paste below code.
<div style="background-color: orange; max-height: 100px;">This is 100px maximum height of div element.</div>
So, we should have the following results.
Let us create two elements with different minimum heights of 55px and 70px, copy and paste below code.
<div style="background-color: blue; max-height: 55px;">This is 55px maximum height of div element.</div>
<div style="background-color: green; max-height: 70px;">This is 70px; maximum height of div element.</div>
So, we should have the following results.