Why isn't my div taking up the whole page?

Question

I am trying to make a single-page React application that takes up the entire viewport of any browser that views it. (I am concerned about desktop for now. Not intended for use on mobile.) To this end, I'd like my app components to take up the entire page.

My application:

import './App.css';
import { MyCalendar } from "./Components/MyCalendar"

function App() {
  return (
    <div className="grid-container">
      <p className="paragraph">Left-side placeholder</p>
      <MyCalendar className="mycalendar" />
    </div>
  );
}

export default App;

App.css

.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  column-gap: 10px;
  height: 100%; width: 100%;
}

.paragraph {
  text-align: center;
}

.mycalendar {
  height: 100%; width: 100%;
  text-align: center;
}

I put this into a sandbox here.

Before this gets marked as duplicate, I have seen that a few people have had the same question. Unfortunately I've been unable to resolve my issue from their answers. Here are a few I've looked at:

1. Link. The answers either seem irrelevant (e.g. removing position, which is not in my code), or hasn't worked for me (e.g. setting body to height: 100vh and everything else to height: 100%).
2. Link. The top answer is to use flexbox, and I am hoping to use grid.
3. Link. Use height: 100vh, which did not work for me.

Some background on the app: The app uses a grid to format two main components: a placeholder on the left and a calendar on the right. I would like to have the placeholder take up 25% of the width, and the calendar the rest. I would like these two components to extend to the bottom of the page if there's nothing below it.

The approach that makes the most sense to me is to set the body to height: 100vh; width: 100 vw;, and layout remaining components in terms of percentages from there. I hope someone here can show me why this is not working for me.

Does anyone see what I'm doing wrong?

Answer 1

Three hints:

• if you want the content to take 100% height of the document, you have to set height: 100% from the top (root) to the particular element.

• there's a built-in style in codesandbox that adds some extra margin to the page

• just create a css file like styles.css, import it in the App.tsx or index.tsx with:

---

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
}

#root {
  height: 100%;
}

e.g. App.tsx:
import './styles.css';

---

https://codesandbox.io/s/modest-cache-6po0zw?file=/src/styles.css:0-91