How to Make body height to 100% of the Browser Height ?

Last Updated : 23 Feb, 2023

As a web developer, you may find yourself in a situation where you want to create a full-screen layout for your website. The way to achieve this is to make the <body> element take up 100% of the height of the browser window. This can be accomplished through the use of CSS.

In this article, we will cover the following topics:

What is the <body> element in HTML?
Why make the <body> element take up 100% of the browser height?
How to make the <body> element take up 100% of the browser height.?

What is the <body> element in HTML?

The <body> element is the main container for the content of an HTML document. It holds the majority of the content that the user interacts with on a website, including text, images, and other media. By default, the height of the <body> element is determined by the height of its contents, meaning, it will only take up as much space as necessary to hold all of its contents.

Why make the <body> element take up 100% of the browser height?

There are several reasons why you may want to make the <body> element take up 100% of the browser height. One reason is to create a full-screen layout for your website. This can be useful for creating an immersive experience for the user, or for creating a background that covers the entire browser window.

Another reason is to ensure that the content of your website is always visible, regardless of the size of the browser window. For example, if the user has a smaller screen or resizes the browser window, making the <body> element take up 100% of the browser height will ensure that the content is always visible and centered within the window.

How to make the <body> element take up 100% of the browser height?

To make the <body> element take up 100% of the browser height, you will need to use CSS. CSS allows to adjustment of the height of an element using the height property. While there are several units to specify the height of <body>. The vh is a relative unit that is commonly used.

vh: It stands for viewport height. The viewport refers to the browser window size. Thus when using “vh” as a unit, the element’s height is adjusted relative to the browser window (viewport’s) height.
vw: It stands for viewport width. It is used to set the browser width to 100% relative to the browser window (viewport’s) width.
%: The % unit is used to specify the height or width of an element relative to the height or width of its parent element. For example, if you set the height of a parent element to 100%, and then set the height of a child element to 50%, the child element will have a height that is 50% of the height of the parent element.

Syntax: To set a <body> to Have 100% of the Browser Height, it can simply use the following property of CSS:

 body {
    height: 100vh;
    /* or */
    height: 100%;
}

Example: The following code demonstrates how to make the body element take up 100% of the browser height. In this example, the height property of the <body> element is set to 100%. This makes the <body> element take up the full height of the browser window. The content inside the div element of the body element will be centered vertically within the browser window.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible"
        content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <title>Make body 100% of Browser Height</title>
    <style>
        body {
            height: 100%;
            background-color: green;
        }
        .divClass{
            text-align: center;
            color: white;
            font-size: 5rem;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="divClass">
        <div>GeeksforGeeks</div>
        <div>A computer science portal for geeks</div>
    </div>
</body>
</html>

Output:

Example 2: To Make the body height 100% of the Browser Height we can use other CSS properties, and make the body element of your webpage fill the entire height of the browser window using CSS.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>My Webpage</title>
    <style>
        body {
          height: 100%;
          min-height: 100vh;
          margin: 0;
          padding: 0;
          background-color:rgb(1, 45, 14);
        }
        .heading{
            text-align: center;
              color: rgb(255, 255, 255);
        }
    </style>
</head>
 
<body>
    <!-- Your webpage content goes here -->
    <div class="heading">
        <h1> GeeksforGeeks !</h1>
        <h2> 
              Here body height to 100% of the Browser Height 
          </h2>
        <h2> Learn Data Structure & Algorithm </h2>
    </div>
</body>
</html>