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 −


Advertisements