React Materialize CSS全屏高度

Question

我正在[使用Materialize CSS构建一个React Web应用程序，我想了解全屏组件的一些问题。我要实现的目标非常简单：我希望下图中的SIDEBAR和CONTENT使用100％的屏幕高度。

“ >>

/************************** Dashboard.js ************************/
import React from "react";
import "../../style.css";

export default function Dashboard() {
  return (
    <div className="fullscreen-container">
      <div class="row">
        {/* SIDEBAR */}
        <div className="col s12 m4 l3 sidebar">
          <h4>SIDEBAR</h4>
        </div>
        {/* CONTENT */}
        <div className="col s12 m8 l9 content">
          <h4>CONTENT</h4>
        </div>
      </div>
    </div>
  );
}
/************************** style.css ************************/
 .fullscreen-container {
  background-color: green;
  height: 100vh;
}

.sidebar {
  background-color: darkred;
  width: 100%;
  height: 100%;
}

.content {
  background-color: darkslateblue;
  width: 100%;
  height: 100%;
}
我试图将.content和.sidebar的高度改为100vh，但它的覆盖范围比我的全屏还要多（请注意，滚动条，并且我的底部有一个额外的空白）。我不明白哪里出了问题，您的帮助将不胜感激。

当我尝试使用高度：100vh

：

编辑

：

底部的空白似乎与我的文字和屏幕顶部之间的高度相同，是否是由于某种填充？它实现了CSS网格吗？我该如何解决？

我正在[使用Materialize CSS构建一个React Web应用程序，我想了解全屏组件的一些问题。我要实现的目标非常简单：我想要...

Answer 1

您的2个div占据其父级的100％高度-您2个div的父级为<div class='row'..>，而不是视图高度的100％；因此，只需使其100％是其父级，即fullscreen-container类的div；