How to make an element with padding only span 100% of the viewport height?

Question

I'm using a CSS class that sets the height to the full viewport height using:

.fullheight { min-height: 100vh }

However, there is a nav bar on the top of my page, and I want to preserve space for it using padding

.padding { padding-top: 55px }

Now, I format my div like this:

<div class="fullheight padding"> </div>

The padding works fine, but the height of the div of course is now 55px bigger than my viewport. Since I use different paddings (depending on the shape of the nav bar), I'm looking for a solution that keeps the total height of the div at 100vh, regardless of the padding I add using an additional class. Possible?

Answer 1

You need to use box-sizing: border-box to include padding in the total height of the div. So your code will look like this:

HTML:

<div class="fullheight padding"> </div>

CSS:

.fullheight {
  min-height:         55px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  -ms-box-sizing:     border-box;
  -o-box-sizing:      border-box;
  box-sizing:         border-box;
}

.padding {
  padding-top: 55px;
}