How to get 100% height of page content when using a MDL fixed header in Chrome?

Question

I'm trying to make a page with a fixed header using material design lite. The problem is that I can't get the entire space of the page-content div.

Suppose I wanted to paint red the whole page except for the navigation bar. This works on Firefox:

<div class="page-content" style="height:100%">
          <div style="background:#ff0000;height:100%"></div>
</div>

codepen : http://codepen.io/anon/pen/qONpXQ

This exact same codepen doesn't work in Chrome. How can I get the whole space in Chrome? I don't really care if the solution breaks the page in Firefox.

Answer 1

I created a different solution. The problem with using vh to set a content container's height is that if the content becomes a lot it will overflow the background color since the div is now a fixed height.

In this code pen I have created a "background-color" using a pseudo element which allows the content to scroll as usual but have the background still.

http://codepen.io/mcclaskiem/pen/YyWYoP

.page-content{
  background-color:red;
  height: 100%;
  width: 100%;
  &:after {
    content: "";
    height: 100vh;
    width: 100%;
    background-color: red;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
  }
}