如何在Chrome中使用MDL固定標頭時獲得100％的頁面內容高度？

Question

我正在嘗試使用材質設計精簡版制作帶有固定標題的頁面。 問題是我無法獲得page-content div的整個空間。

假設我想在整個頁面上繪制紅色，但導航欄除外。 這適用於Firefox：

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

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

完全相同的codepen在Chrome中不起作用。 如何在Chrome中獲得整個空間？ 我真的不在乎解決方案是否會破壞Firefox中的頁面。

Answer 1

我創建了另一種解決方案。 使用vh設置內容容器高度的問題是，如果內容變得很多，它將溢出背景顏色，因為div現在是固定高度。

在這個代碼筆中，我使用偽元素創建了一個“背景顏色”，允許內容像往常一樣滾動但背景仍然是。

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

Answer 2

出於某種原因，無論我做什么，chrome上的“頁面內容”都不能與百分比一起使用。 我給你的建議是使用父div作為你的內容，或者用ems或像素定義“page-content”的高度。

我個人現在有一個類似的問題，老實說，我無法解決它

編輯： mcclaskiem解決方案更好地嘗試這個codepen