CSS sets the height to the screen height
Setting the Height to the Screen Height with CSS
In web design, you often need to set the height of an element to the screen height. This ensures the page displays properly on different devices and improves the user experience. In this article, we’ll explain how to use CSS to set the height of an element to the screen height and provide some sample code to help you better understand.
1. Setting Height Using the vh Unit
In CSS, we can use the vh unit to set the height of an element as a percentage of the viewport height. The viewport height is the height of the browser’s visible area, which is usually equal to the screen height. Here’s a simple example code that shows how to use the vh unit to set an element’s height to 80% of the screen height:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set Height to Screen Height</title>
<style>
.full-height {
height: 80vh;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="full-height">
<p>Height is set to 80% of screen height.</p>
</div>
</body>
</html>
Output:
In the example above, we added a class called full-height to a div element and set its height to 80vh. When the page loads, the div element will be 80% of the screen height.
2. Dynamically Setting Height with JavaScript
In addition to using CSS units to set height, we can also use JavaScript to dynamically set an element’s height to the screen height. Here’s a sample code example showing how to use JavaScript to achieve this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set Height to Screen Height</title>
<style>
.full-height {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="full-height" id="fullHeightDiv">
<p>Height will be set to screen height.</p>
</div>
<script>
window.onload = function() {
var fullHeightDiv = document.getElementById('fullHeightDiv');
fullHeightDiv.style.height = window.innerHeight + 'px';
};
</script>
</body>
</html>
Output:
In the above example, we retrieve the fullHeightDiv element through JavaScript and set its height to window.innerHeight, which is the screen height, after the page loads.
3. Using Flexbox Layout to Set Height
Flexbox is a powerful layout model that can help us more easily achieve various layout effects. We can use Flexbox to set the height of an element to the screen height. Here’s a code example showing how to use Flexbox to achieve this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set Height to Screen Height</title>
<style>
body {
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
.full-height {
flex: 1;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="full-height">
<p>Height is set to screen </p>
</div>
</body>
</html>
Output:
In the example above, we set the height of the body element to 100vh and use Flexbox layout to set the height of the .full-height element to the remaining space, thereby setting the element’s height to the screen height.
4. Setting Height with Grid Layout
In addition to Flexbox layout, we can also use Grid layout to set the height of an element to the screen height. Grid layout provides more layout options and more flexible control over the position and size of elements. Here’s a sample code example showing how to use Grid layout to achieve this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set Height to Screen Height</title>
<style>
body {
display: grid;
grid-template-rows: 1fr;
height: 100vh;
margin: 0;
}
.full-height {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="full-height">
<p>Height is set to screen height.</p>
</div>
</body>
</html>
Output:
In the above example, we set the height of the body element to 100vh and use Grid layout to set the height of the .full-height element to the remaining space, thereby setting the element’s height to the screen height.
5. Using the calc() Function to Set Height
In some cases, we may need to perform some calculations when setting the height of an element. This can be achieved using the calc() function. The calc() function allows us to perform operations such as addition, subtraction, multiplication, and division when setting the element’s height. Here is a sample code demonstrating how to use the calc() function to set the height of an element to the screen height minus a fixed height:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set Height to Screen Height</title>
<style>
.full-height {
height: calc(100vh - 100px);
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="full-height">
<p>Height is set to screen height minus 100px.</p>
</div>
</body>
</html>
Output:
In the example above, we use the calc() function to set the height of the .full-height element to the screen height minus 100px, thus achieving the effect of dynamically calculating the height.
6. Using JavaScript to Monitor Window Resize Changes
In some cases, we may need to recalculate the height of an element when the window resizes to ensure that the element always matches the screen height. We can use JavaScript to monitor the window resize event and reset the element’s height when the event occurs. Here is a sample code that demonstrates how to implement this functionality:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set Height to Screen Height</title>
<style>
.full-height {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="full-height" id="fullHeightDiv">
<p>Height will be set to screen height.</p>
</div>
<script>
window.onload = function() {
var fullHeightDiv = document.getElementById('fullHeightDiv');
fullHeightDiv.style.height = window.innerHeight + 'px';
};
window.addEventListener('resize', function() {
var fullHeightDiv = document.getElementById('fullHeightDiv');
fullHeightDiv.style.height = window.innerHeight + 'px';
});
</script>
</body>
</html>
Output:
In the above example, we use JavaScript to listen for the window’s resize event. When the window size changes, we reset the height of the fullHeightDiv element to the window’s height, thus keeping the element aligned with the screen height.
7. Using CSS Grid Layout to Set a Fullscreen Background
In addition to setting an element’s height to the screen height, sometimes we need to set the background of an element to the full screen height. In this case, we can use CSS Grid Layout to achieve a fullscreen background effect. Here’s a sample code demonstrating how to set a full-screen background using CSS Grid layout:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set Full Screen Background</title>
<style>
body {
display: grid;
place-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.full-screen-bg {
width: 100%;
height: 100%;
background-image: url('https://www.geek-docs.com/background.jpg');
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<div class="full-screen-bg">
<p>This is a full screen background.</p>
</div>
</body>
</html>
Output:
In the example above, we use CSS Grid Layout to set the height of the body element to 100vh, set the width and height of the .full-screen-bg element to 100%, and set the background image to background.jpg, thus achieving a full-screen background effect.
8. Implementing Full-Screen Scrolling with CSS
Sometimes we need to implement a full-screen scrolling effect, where the page only displays one screenful of content at a time. We can achieve this effect using CSS and JavaScript. Here is a sample code demonstrating how to achieve a full-screen scrolling effect using CSS and JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Full Screen Scroll</title>
<style>
.section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
}
.section:nth-child(odd) {
background-color: #f0f0f0;
}
.section:nth-child(even) {
background-color: #e0e0e0;
}
</style>
</head>
<body>
<div class="section">Section 1</div>
<div class="section">Section 2</div>
<div class="section">Section 3</div>
<div class="section">Section 4</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
let sections = document.querySelectorAll('.section');
let currentSection = 0;
function scrollToSection(index) {
window.scrollTo({
top: sections[index].offsetTop,
behavior: 'smooth'
});
}
window.addEventListener('wheel', function(e) {
if (e.deltaY > 0 && currentSection < sections.length - 1) { currentSection++;
scrollToSection(currentSection);
} else if (e.deltaY < 0 && currentSection > 0) {
currentSection--;
scrollToSection(currentSection);
}
});
});
</script>
</body>
</html>
Output:
In the above example, we define multiple .section elements, each with a height of 100vh, or one screen height. By listening for scroll events in JavaScript, we achieve a full-screen scrolling effect.
Through the example code above, we’ve demonstrated how to use CSS to set an element’s height to the screen height and achieve some common layout effects. Readers can choose the appropriate method to set element height based on their needs to achieve better page display. I hope this article is helpful!