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
Published on 08-May-2020 17:47:21
Advertisements