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. The vh is a relative unit that is commonly used.
- vh: It stands for viewport height. The viewport refers to the browser window size. Thus when using vh as a unit, the element’s height is adjusted relative to the browser window (viewport’s) height.
- vw: It stands for viewport-width. It is used to set the browser width to 100% relative to the browser window (viewport’s) width.
Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS:
height:100vh;
Example 1:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Make div 100% of height</title>
<style>
#geeks {
height: 100vh;
width: 100vw;
font-size: 20px;
font-family: Times;
padding-top: 250px;
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:
Example 2: To give a div tag 100% height of the browser window using CSS, we can use the following HTML and CSS code
Syntax:
.height {
height: 100%;
min-height: 100vh;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>div tag 100% height </title>
<style>
* {
margin: 0;
padding: 0;
background-color: rgb(15, 75, 33);
}
.height {
line-height: 30px;
height: 100%;
min-height: 100vh;
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>
|
Description: The 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.
Output:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
04 Aug, 2023
Like Article
Save Article