In css3 you can specify the height of any element or box.You can specify
the height of any element by using height element.
Values for height
1) You can specify with auto value
2) You can specify with px value
3) You can specify with % value
4) You can specify with vh value
Height using value with auto
<style type="text/css">
.in-p1{
background: lightyellow;
height: auto;
}
</style>
<p class="in-p1">
This is paragraph having background color lightyellow.
This paragraph has height with auto value.As you put more
text in this paragraph it's height will changed automatically
according to the paragraph height
</p>
Out put of the above code
This is paragraph having background color lightyellow. This paragraph has height with auto value.As you put more text in this paragraph it's height will changed automatically according to the paragraph height
Height using value with px
<style type="text/css">
.in-p1{
background: lightyellow;
height: 100px;
}
</style>
<p class="in-p1">
This is paragraph having background color lightyellow.
This paragraph has height of 100px fixed.
</p>
Out put of the above code
This is paragraph having background color lightyellow. This paragraph has height of 50px fixed.
Height using value with %
<style type="text/css">
.in-p1{
background: lightyellow;
height: 80%;
}
</style>
<p class="in-p1">
This is paragraph having background color lightyellow.
This paragraph has height of 80% .
</p>
Output of the above code
This is paragraph having background color lightyellow. This paragraph has height of 80%.
Note
Output of height using persentage will be different of different screen.
Height using value with vh(view height)
<style type="text/css">
.in-p1{
background: lightyellow;
height: 30vh;
}
</style>
<p class="in-p1">
This is paragraph having background color lightyellow.
This paragraph has height of 30vh .
</p>
Out put of the above code
This is paragraph having background color lightyellow. This paragraph has height of 80%.
Note
Out put of height using vh will be different according to height of the screen.
Height using value with max-height property
The max-height property is used to specify the
maximum height of the of the element or any targeted box.
Height using max-height
<style type="text/css">
.in-p1{
background: lightyellow;
max-height: 200px;
}
</style>
<p class="in-p1">
This is paragraph having background color lightyellow.
This paragraph has max-height of 200px .
</p>
Out put of the above code
This is paragraph having background color lightyellow. This paragraph has max-height 200px.
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
