Html 在Chrome中使用MDL固定标题时，如何获得100%的页面内容高度？

我正在尝试使用material design lite制作具有固定标题的页面。问题是我无法获得

页面内容的整个空间

假设我想把整个页面涂成红色，除了导航栏。这适用于Firefox：

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



代码笔：

这种完全相同的代码笔在Chrome中不起作用。我怎样才能在Chrome中获得整个空间？我真的不在乎解决方案是否会破坏Firefox中的页面。
出于某种原因，无论我做什么，chrome上的“页面内容”都不适用于百分比。我给您的建议是，要么对内容使用父div，要么以ems或像素为单位定义“页面内容”的高度

我个人现在有一个类似的问题，我真的无法解决它

编辑：
mcclaskiem解决方案效果更好尝试一下这个
我创建了一个不同的解决方案。使用vh设置内容容器高度的问题是，如果内容变多，它将溢出背景色，因为div现在是固定高度

在这个代码笔中，我使用一个伪元素创建了一个“背景色”，它允许内容像往常一样滚动，但背景仍然不变


您可以使用
height:100vh
将div的高度设置为视口高度的100%。请参考我发布的答案而不是此解决方案。这是最好的解决方案，尽管
。页面内容{height:100vh；background:#ff0000；}
对我来说已经足够了。
.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;
  }
}