Viewport Height settings for a minimum page height

The following code allows for the main section of a website between the header and footer tags to be 100% of the page always, regardless of content contained within. I subtracted 46 pixels from the 100vh (100% viewport) to account for the header size. Otherwise it would be 100% of viewport, plus 46 pixels so there’d always be a 46 pixel gap between the bottom of the page and the footer. Replace .main_color with whatever is your site’s class or id for content. The different min-height rules exist because of the different kinds of browsers. vh is relative to 1% of the height of the viewport. The Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm.


.main_color {
min-height:calc(100vh – 46px) !important;
min-height:-moz-calc(100vh – 46px) !important;
min-height:-webkit-(100vh – 46px) !important;
min-height:expression(100vh – 46px) !important;
min-height:-o-calc(100vh – 46px) !important;