How To Make a <div> Element Extend to the Page Bottom Even Having No Content

Solutions with CSS

If you need to make a <div> element extend to the bottom and fill the page, try the following.

Use viewport units and set the height and width of the <body> element to “100vh” and “100vw” respectively. Both the margin and padding of the <html> and <body> elements must be set to 0. In the example below, you can also see that the height and width of the <div> are set to "100%".

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Example of making a <div> extend to the page bottom:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
      body {
        height: 100vh;
        width: 100vw;
      }
      * {
        box-sizing: border-box;
      }
      div {
        height: 100%;
        width: 100%;
        padding: 10px;
        background-color: #3ac96f;
      }
    </style>
  </head>
  <body>
    <div class=div1></div>
  </body>
</html>

Let’s see another example, where the <div> element will extend to the page bottom when there isn’t enough content that could fill the available vertical browser viewport.

Example of making a <div> fill the page:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      html,
      body {
        height: 100%;
        display: flex;
        flex-direction: column;
      }
      body > * {
        flex-shrink: 0;
      }
      .div1 {
        background-color: #5c88ed;
      }
      .div2 {
        background-color: #90de90;
        flex-grow: 1;
      }
    </style>
  </head>
  <body>
    <div class=div1>
      div 1
      <br>
    </div>
    <div class=div2>
      div 2
      <br>
    </div>
  </body>
</html>