Я создаю реагирующее веб-приложение [с помощью Materialise CSS] и хотел бы понять некоторые проблемы с моим полноэкранным компонентом. То, чего я пытаюсь достичь, довольно просто: я бы хотел, чтобы 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 сетка? Как я могу это исправить?