How to stretch elements to fit the whole height of the browser window with CSS?

CSS Web Development Front End Technology

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>