How to Make the Div Height Occupy the Remaining Page Height

flex-div-height

First of all, make sure your page body covers the space of the browser window. Your page may have little content on it, content that is not enough to spread on the viewport of your screen. This leaves you in an ugly situation where you have an ugly space at the bottom of you page that comes after the page content.

First: Make Page Height Equal to Browser Height

To make the page height extend to the bottom of the browser height, you will need to set min-height attribute of your page. Don’t set the “height” as it will restrict the height of the page. If the content is bigger, you won’t be able to scroll down to see the rest. But there is one catch.. You can’t set this attribute on body or html elements, it simply won’t work. Put a wrapper div under body tag and set min-height attribute of this div. The unit you will user for this is vh. Set your div’s height like so:

VH is a viewport unit. If you don’t know what vh means see this page: http://www.quirksmode.org/css/units-values/viewport.html

Now you page will always have minimum of 99vh height, which will make it extend to the height of the browser even if there is not enough content.

Second: Make Your Div Occupy the Remaining Page Height

Now that we have a page that can extend to the bottom of the viewport, we can make that div at the bottom extend to the bottom of the viewport. This can be the footer of your page and this way the footer can be re-sized dynamically without JavaScript.

For this, we will make use of “flex” display attribute which is a css attribute introduced recently.

Apply the below style to your wrapper div:

Apply the below style to your footer div (the div at the bottom of your page that you want to occupy the remaining page space). This div should be a child element of wrapper div.

It should work now. Your footer div should extend to the bottom of the browser height.

Hope this helps.
Good Luck,
Serdar