Example div fill height | child div fill parent height

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.

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

Absolute Positioning

Tables (or rather display: table)

Child div fill parent height

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

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.