CSS is highly prevalent on the web
CSS Height Fills the Web Page
In web development, you often encounter situations where you need to make an element’s height fill the entire web page. This requirement might be to make a page look more aesthetically pleasing or to achieve a specific layout effect. In this article, we’ll introduce several common methods for making an element’s height fill the entire page.
1. Using Absolute Positioning
A common method is to use absolute positioning to make an element’s height fill the entire page. We can set the element’s position property to absolute, and then set the top, bottom, left, and right properties to 0. This will cause the element to fill the entire page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Absolute Positioning</title>
<style>
body {
margin: 0;
padding: 0;
}
.full-height {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="full-height">
This div will fill the entire height of the page.
</div>
</body>
</html>
In the example above, we created a div element, added the full-height class to it, and then used CSS to set its height to the entire page.
2. Using Flex Layout
Another common approach is to use Flex Layout to make an element fill the entire page. We can set the parent element’s display property to flex and the flex-direction property to column so that the child element will fill the entire height of the web page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Layout</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
height: 100vh;
}
.full-height {
flex: 1;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="full-height">
This div will fill the entire height of the page.
</div>
</body>
</html>
Code Runtime Results:
In the example above, we use Flex layout to set the height of the body element to the entire viewport height, and then use flex: 1 to make the child elements fill the entire page.
3. Using Grid Layout
In addition to Flex layout, we can also use Grid layout to make elements fill the entire page height. We can set the parent element’s display property to grid, and then set the child element’s grid-row property to 1 / -1, so that the child element will take up the entire height of the web page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout</title>
<style>
body {
margin: 0;
padding: 0;
display: grid;
height: 100vh;
}
.full-height {
grid-row: 1 / -1;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="full-height">
This div will fill the entire height of the page.
</div>
</body>
</html>
Code running results:
In the example above, we use Grid Layout to set the height of the body element to the entire viewport height, and then use grid-row: 1 / -1 to set the height of the child elements to the entire page height.
4. Using the vh Unit
Another common method is to use the vh unit to set the height of an element to the entire page height. The vh unit represents a percentage of the viewport height; for example, 100vh represents the entire viewport height.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VH Unit</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
}
.full-height {
height: 100%;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="full-height">
This div will fill the entire height of the page.
</div>
</body>
</html>
Code Running Results:
In the above example, we set the height of the body element to 100vh and then set the height of the child elements to 100%. This will cause the child elements to take up the entire height of the webpage.
5. Dynamically Calculate Height Using JavaScript
If the above method doesn’t meet your needs, you can also use JavaScript to dynamically calculate the element’s height, allowing it to take up the entire height of the webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Height Calculation</title>
<style>
body {
margin: 0;
padding: 0;
}
.full-height {
height: 100vh;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="full-height" id="fullHeight">
This div will fill the entire height of the page.
</div>
<script> window.addEventListener('resize', function() {
document.getElementById('fullHeight').style.height = window.innerHeight + 'px';
});
</script>
</body>
</html>
Code Running Results:
In the above example, we use JavaScript to listen for window resize events and dynamically calculate the element’s height, making it fill the entire webpage.
Through the above methods, we can easily achieve the effect of making an element’s height fill the entire webpage, thereby achieving a more flexible and beautiful page layout.