How to stretch elements to fit the whole height of the browser window with CSS?
To stretch elements to fit the whole height of the browser window with CSS, the code is as follows −
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
*{
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
}
.fullHeight{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
height: 100%;
background: rgb(135, 27, 207);
color:white;
font-size: 40px;
padding: 40px;
}
</style>
</head>
<body>
<div class="fullHeight">This div element will stretch to the whole height and width of the
window</div>
</body>
</html>Output
The above code will produce the following output −
Published on 08-May-2020 17:47:21
