Search code examples
javascriptcssreactjsmaterialize

React Materialize CSS full-screen height

I am building a react web application [with Materialize CSS] and I would like to understand some problems with my full-screen component. What I am trying to achieve is pretty simple : I would like the SIDEBAR and CONTENT from the following image to use 100% of the screen height.

my current output

/************************** 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%;
}

I tried to put the height of .content and .sidebar to 100vh instead but it covers more than my full screen (notice the scrollbar and I have an extra white space at the bottom). I don't understand what is wrong and your help would be appreciated.

when I try with height: 100vh: when I try with height: 100vh

EDIT:

The white space at the bottom seems to be the same height as the space between my text and top of the screen, is it because of some sort of padding? Is it materialize css grid? How could I fix that?

Solution

  • Your 2 divs occupy 100% height of their parent - The parent of your 2 divs is <div class='row'..> and it is not 100% of the view height; So just make it 100% of its parent, the div with fullscreen-container class;

    add this to your CSS:

    .row { height:100%; margin-bottom:0!important;}

    EDIT: there was extra whitespace at the bottom due to row class having margin-bottom:20px which we had to override

    complete working stackblitz here