How to Give a Div Element 100% Height of the Browser Window

A browser window is a square that Firefox, Chrome, Opera, Safari, and Edge draw the page in. Setting a <div> element's height to 100% of the browser window is possible with some CSS properties. CSS allows you to adjust the height of an element using the height property. It is very easy if you follow the steps described below.

Let’s see an example and try to discuss each part of the code together.

Create HTML

  • Create <div> with the id "box".
  • Place <h2> tag in the div and write a title.
  • Place <p> tag and write some content.
<body>
  <div id="box">
    <h2>W3docs</h2>
    <p>
      An online free web developer information website, with tutorials and references relating to web development.
    </p>
  </div>
</body>

Add CSS

  • Set the size of the <div> using the height and max-width properties. The "vh" is a relative unit that is commonly used. The viewport refers to the browser window size. Thus, when we use "vh" as a unit, the element’s height is adjusted relative to the browser window (viewport’s) height. The "vw" stands for viewport-width. It is used to set the browser width 100% relative to the browser window (viewport’s) width.
  • Use the padding property which creates space around the element’s content.
  • Use the margin property to create space around the element.
  • Choose colors for your background with the background-color property and text with the color property. You can choose any color you want from the color picker.
  • Use the text-align property to align the inner content of a block element.
  • For the <h2> tag, use the padding-top property.
#box {
  height: 96vh;
  max-width: 100vw;
  background-color: #4287f5;
  text-align: center;
  color: white;
  margin: 0;
  padding: 0;
}

h2 {
  padding-top: 100px;
}

Let’s bring the code parts together and see the result of our code.

Example of giving the <div> tag 100% height of the browser window:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #box {
        height: 96vh;
        max-width: 100vw;
        background-color: #4287f5;
        text-align: center;
        color: white;
        margin: 0;
        padding: 0;
      }
      h2 {
        padding-top: 100px;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <h2>W3docs</h2>
      <p>
        An online free web developer information website, with tutorials and references relating to web development. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
    </div>
  </body>
</html>

Example of giving the <div> tag 100% height of the window with the display property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #box {
        height: 98vh;
        max-width: 100vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #4287f5;
        color: white;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <h2>W3docs</h2>
      <p>
        Free online web developer information website, with tutorials and references relating to web development.
      </p>
    </div>
  </body>
</html>

In the example above, we use the "flex" value of the display property, the "column" value of the flex-direction property, the "center" value of the align-items property and the "center" value of the justify-content property. The "flex" value of the display property displays an element as a block-level-flex container. When we use the "column" value of the flex-direction property, items are displayed vertically from top to bottom. When we use the "center" value of the align-items property, items are placed at the center of the container. And when the "center" value of the justify-content property is used, the items are placed at the center of the container.