CSS allows to adjustment of the height of an element using the height property. While there are several units to specify the height of an element. Set the height of a <div> to 100% of its parent container with height: 100%, or use height: 100vh; for a full viewport height, ensuring the <div> spans the entire browser window. Adjust as per your design preferences.
Unit | Description |
---|---|
vh | Adjusts the element’s size relative to the viewport’s height. |
% | Sets the size relative to the parent container’s size, expressed as a percentage. |
Using ‘vh’ unit
To make a <div> occupy 100% height of its parent container in CSS, set height: 100%;. This percentage-based approach ensures the <div> adjusts dynamically based on the parent’s height.
Syntax:
To set a div element height to 100% of the browser window, it can simply use the following property of CSS:
height : 100 vh ;
Example 1: Implementation to show how to give a div tag 100% height.
<!DOCTYPE html> < html >
< head >
< title >Make div 100% of height</ title >
< style >
#geeks {
height: 100vh;
width: 100vw;
font-size: 20px;
margin: 0px;
background-color: green;
text-align: center;
color: white;
}
.gfg {
font-size: 40px;
font-weight: bold;
}
</ style >
</ head >
< body >
< div id = "geeks" >
< div class = "gfg" >GeeksforGeeks</ div >
< div >A computer science portal for geeks</ div >
</ div >
</ body >
</ html >
|
Output:
Using ‘ % ‘ unit
In this html and body tags are set to height: 100% to ensure that the entire browser window is taken up by the div tag. The div tag height class is applied to the div tag and also set to height: 100% to make it fill the entire height of the browser window.
Syntax:
.height {
height: 100%;
}
Example 2: To give a div tag 100% height of the browser window we can also use % unit.
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< title >div tag 100% height </ title >
< style >
body {
height: 100%;
}
* {
margin: 0;
padding: 0;
background-color: rgb(15, 75, 33);
}
.height {
line-height: 30px;
height: 100%;
text-align: center;
color: rgb(255, 255, 255);
}
</ style >
</ head >
< body >
< div class = "height" >
< h1 > GeeksforGeeks !</ h1 > < br >
< h2 >
Give a div tag 100% height of the browser window
</ h2 >
< h2 > Learn Data Structure & Algorithm </ h2 >
</ div >
</ body >
</ html >
|
Output: