CSS full screen height minus fixed pixel settings
CSS Height Full Screen Minus Fixed Pixel Settings
/* Set the element on the page to the full screen height minus 100px */
.element {
height: calc(100vh - 100px);
}
In the code above, we use the calc() function to subtract 100px from the screen height (100vh represents the viewport height) to obtain the element’s height as the screen height minus 100px.
Sample Code
To demonstrate the effect more intuitively, we can create a simple webpage with a div element that takes up the full screen height minus 100px. The HTML code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Full Screen Height Minus Fixed Pixels</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.element {
height: calc(100vh - 100px);
width: 80%;
background-color: lightblue;
text-align: center;
line-height: calc(100vh - 100px);
}
</style>
</head>
<body>
<div class="element">
Full Screen Height Minus 100px </div>
</body>
</html>
In this example, we create a div element that takes up the full height of the screen minus 100px and applies some styles to center it.
Running this code, we can see that a div element that takes up the full height of the screen minus 100px is centered on the page, with a 100px margin at the bottom.
Summary
Using the calc() function, we can easily set the height of an element to the screen height minus a fixed number of pixels. This method is very useful when you need to dynamically adjust the height of an element to the screen height minus a fixed number of pixels.