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

CSSWeb DevelopmentFront 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>

Output

The above code will produce the following output −

raja
AmitDiwan
Published on 08-May-2020 14:17:21
Previous Page Print Page
Next Page  
Advertisements