Home » CSS

Make body have 100% of the browser height using CSS

In this tutorial, we will learn how to stretch the body to fit the whole height (100%) of the browser window with CSS. Learn with the help of examples. By Apurva Mathur Last updated : July 15, 2023

How to make body have 100% of the browser height using CSS?

We can simply achieve this by setting the height of the <body> element to 100% including the height of the <html> element to 100%, because if we'll only change the height of the <body> element then the result won't be that satisfying since % height is always based on the height of the parent element which is the <html> element in this case. So by changing the height of <body> and <html> element we'll get the target result.

Example

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <style>
         html {
         height: 100%;
         }
         body {
         margin: 0;
         background:darkcyan;
         min-height: 100%;
         color:white;
         font-size: 20px;
         }
      </style>
   </head>
   <body>
      <h3>Make body have 100% of the browser height</h3>
      <div>
         Don't expect the results without the work. "The only place where success
         comes before work is in the dictionary."
      </div>
   </body>
</html>

Output

CSS Examples »

Why em instead of px?

Changing the color of an HR element