My wrapper div in react doesn't fill window

JavaScript
1

I am super frustrated trying to figure out how to change the background of my React app. I can’t even get the first step of getting the wrapper div to fill the window.

I was going to just change the body background, but then saw that this was not advised and there should never be a reason to do this in React. Also, it seems changing the background of a wrapper div on a re-render is way easier than reaching out of the React app to change the body.

I have a strong feeling this is a stupid simple thing that is just eluding me.

Here is my github link (I also just started using git and github, so any comments on how that looks is also welcome): https://github.com/ATown0789/random-quote-machine/tree/master/random-quote-machine

2

Ok, I suppose you want color to change dynamically. There are couple ways you can achieve it:

  1. Make sure your wrapper wraps entire viewport:
body,
.wrapper {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}
  1. body is just an element like anything else and there is one thing you might want to consider: “My app my rules” :wink:
    I personally struggle to imagine what kind of problem might cause having different classes with different backgrounds and toggling them on body directly from react.
1 Like
3

Thanks for the quick reply!

How is height: 100%; different from min-height: 100vh;?

4

With height 100% you have to pass it down.

html, body, #root, .wrapper {
  height:100%;
}

.wrapper {
  background:blue;
}

vh is always just the viewport height (Viewport-percentage lengths).

1 Like
5

I think I got it… because height is referring to the parent, so in order to get the wrapper to be 100% height of the body, first #root would have to be 100% height of body and body would have to be 100% of html… right?