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

Question

我正在尝试使用 material design lite 制作一个固定 header 的页面。问题是我无法获得 page-content div 的整个 space。

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

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

代码笔：http://codepen.io/anon/pen/qONpXQ

这个完全相同的代码笔在 Chrome 中不起作用。如何在 Chrome 中获取整个 space？我真的不在乎解决方案是否会破坏 Firefox 中的页面。

Answer 1

出于某种原因，无论我做什么，chrome 上的 "page-content" 都无法使用百分比。我对您的建议是为您的内容使用父级 div，或者以 em 或像素为单位定义 "page-content" 的高度。

我个人现在也有类似的问题，老实说我无法解决它

编辑： mcclaskiem 解决方案效果更好试试这个 codepen

Answer 2

我创建了一个不同的解决方案。使用 vh 设置内容容器高度的问题是，如果内容变得很多，它会溢出背景颜色，因为 div 现在是固定高度。

在这个代码笔中，我创建了一个 "background-color" 使用伪元素，它允许内容像往常一样滚动，但背景仍然存在。

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;
  }
}

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

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

html

material-design-lite