Skip to content

Example div fill height | child div fill parent height

  • by

How to make the main content div fill the height of the screen with CSS?

Let’s see one example, the webpage has divided into 3 parts:- A header, mainbody, and footer. We want the mainbody to fill 100% of the page (fill 100% in between footer and header).

Here is code Stretch div using bottom & top to fill remaining space between elements.

<html>

<head>
    <style type="text/css">

      #head1 {
          height: 40px;
          width: 100%;
          background-color: blue;
      }
      #foot1 {
          height: 40px;
          width: 100%;
          background-color: green;
          position: absolute;
          bottom: 0;
      }

      #maincontent {
        position: absolute;
        top: 40px; /* Header Height */
        bottom: 20px; /* Footer Height */
        width: 100%;
      }

      

</style>
</head>

<body>
  <header id="head1"> Header </header>
  <div id="maincontent">

  </div>

  <footer id="foot1"> Footer </footer>
</body>

</html>

Output:

div fill height of screen with CSS

div fill height

How to make a div take the remaining height?

Let’s assume you fixed the height and element on the top and remains bottom want to fill with div.

div fill height

You can do it by using flex or Absolute Positioning or Tables or CSS3 calc.

Using Flex

<html>

<head>
    <style type="text/css">
        #outer {
          display: flex;
          flex-flow: column;
          height: 100%;
      }

      #inner_fixed {
          height: 100px;
          background-color: grey;
      }

      #inner_remaining {
          background-color: #DDDDDD;
          flex-grow : 1;
      }

  </style>
</head>

<body>
  <div id="outer">

    <div id="inner_fixed">
        Fixed Height
    </div>

    <div id="inner_remaining">
        Remaining Space
    </div>

</div>
</body>

</html>

Absolute Positioning

<html>

<head>
    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
        }

        #inner_fixed {
            height: 100px;
            background-color: grey;
        }

        #inner_remaining {
            background-color: #DDDDDD;    

            position: absolute;
            top: 100px;
            bottom: 0;
            width: 100%; 
        }

    </style>
</head>

<body>
  <div id="inner_fixed">
    Fixed height
</div>

<div id="inner_remaining">
    Remaining height
</div>
</body>

</html>

Tables (or rather display: table)

<html>

<head>
    <style type="text/css">
        html, body, #outer {
            height: 100%;
            width: 100%;
            margin: 0;
        }
        
        #outer {
            display: table;
        }
        
        #inner_fixed {
            height: 100px;
            background-color: grey;
            
            display: table-row;
        }
        
        #inner_remaining {
            background-color: #DDDDDD;
            
            display: table-row;    
        }

    </style>
</head>

<body>
  <div id="outer">

    <div id="inner_fixed">
        Fixed Height
    </div>

    <div id="inner_remaining">
        Remaining Space
    </div>

</div>
</body>

</html>

Child div fill parent height

Force child div to be 100% of parent div’s height without specifying parent’s height example code:-

<html>

<head>
    <style type="text/css">
       .parent {
          background: red;
          padding: 10px;
          display:flex;
      }

      .other-child {
          width: 100px;
          background: yellow;
          height: 150px;
          padding: .5rem;
      }

      .child {  
          width: 100px;
          background: blue;
      }

  </style>
</head>

<body>
  <div class="parent">
      <div class="other-child">
        Only used for stretching the parent
    </div>
    <div class="child"></div>
</div>

</div>
</body>

</html>

Output:

Child div fill parent height

Do comment if you know another way to do it or have doubts on this tutorial.

Note: The All HTML Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading