CSS 100% height not working in React app

Question

I am trying to use Flexbox in my React app to create a simple two column webpage that occupies the full width and height.

I can get this to work with HTML and CSS on their own but not within a React app.

So far I have:

:root {
  overflow-x: hidden;
  height: 100%;
}

body {
  min-height: 100%
}

.flexbox {
  height: 100%;
  display: flex;
}

.left {
  flex: 0 0 200px;
  height: 100%
}

.right {
  flex: 1
}

and:

<div class="flexbox">
  <div class="left">
    Left
  </div>
  <div class="right">
    Right
  </div>
</div>

I realise that I need to account for the additional <div id="root"></div> tag in my index.html so I have also added the following to my css:

#root {
  height: 100%;
}

And my render function:

render() {
  return (
    <div className="flexbox">
      <div className="left">Left</div>
      <div className="right">Right</div>
    </div>
  )
}

but this doesn't work. The columns exist but are not full height. Why not?

Forgive me if I sound stupid, but you are importing your css file right ? — Dane, Oct 16 '17 at 11:58
Yes I am.`left` and `right` actually have background colours and they are showing. — tommyd456, Oct 16 '17 at 11:59
you can refer this link:-- https://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height — Sourbh Gupta, Oct 16 '17 at 12:11
Possible duplicate of [React - Component Full Screen (with height 100%)](https://stackoverflow.com/questions/38428322/react-component-full-screen-with-height-100) — Shevchenko Viktor, Mar 22 '19 at 12:32

Arne Jenssen · Answer 1 · 2022-01-15T08:07:13.807

38

If you use create-react-app, it adds an element with class=App and an element with id=root to the DOM. They should also get height: 100%

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

edited Jan 15 '22 at 08:07

answered Dec 04 '18 at 16:43

Arne Jenssen

1,235
3
14
22

5

Amazing. Spent 3 days on this issue!! This did it for me! – logixplayer Apr 25 '20 at 23:10
`#root` did it! – fujianjin6471 Jan 13 '22 at 09:15
1

Man I hate CRA! – AntonOfTheWoods May 19 '22 at 06:18

score 11 · Answer 2 · answered Oct 16 '17 at 12:11

11

Use viewport height units in css:

#root {
    min-height: 100vh;
}

answered Oct 16 '17 at 12:11

zdolny

999
1
11
21

I really want to understand why my code doesn't work in the React app??? – tommyd456 Oct 16 '17 at 12:14
It really doesn't? It should work, you can try to set `min-height: 100vh;` on your `flexbox` class instead. It works for me, maybe something overwrites your css? – zdolny Oct 16 '17 at 12:19
This will cause excess height on mobile due to the way VH is calculated. – Robert Bracco Apr 14 '22 at 12:46

score 5 · Answer 3 · answered Oct 16 '17 at 12:59

5

You forgot that <html> is also a tag. Moreover, it is parent to all parents! That's why you should give it height of 100% as well.

html, body { height: 100%; }

answered Oct 16 '17 at 12:59

Vitiok

84
7

`:root` is the same as `html` – tommyd456 Oct 16 '17 at 14:05

score 4 · Answer 4 · edited Jan 16 '22 at 11:35

4

The body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well.

However, the content of the body will probably need to change dynamically. Setting min-height to 100% will accomplish this goal.

html {
  height: 100%;
}
body {
  height: 100%;
}

edited Jan 16 '22 at 11:35

Dhia Djobbi

1,176
2
15
35

answered Oct 16 '17 at 12:02

Đức Lê Minh

111
4

`html` does have a height - see `:root` – tommyd456 Oct 16 '17 at 12:02
Remember - this does work outside of React (HTML and CSS) – tommyd456 Oct 16 '17 at 12:03
check my lastest edit. min-height: -> height. it's work fine to me. – Đức Lê Minh Oct 16 '17 at 12:06
you can read this post which explain very clear about min-height. https://stackoverflow.com/a/8468131/6600081 – Đức Lê Minh Oct 16 '17 at 12:11

score 1 · Answer 5 · answered May 21 '20 at 14:48

1

To the parent div of the page, add the following css.

position: fixed;
overflow: auto;
height: 100vh;

answered May 21 '20 at 14:48

ShashankAC

1,016
11
25

score 0 · Answer 6 · answered Oct 16 '17 at 12:25

0

Try This:

[data-reactroot] 
        {height: 100% !important; }

answered Oct 16 '17 at 12:25

Rafiqul Islam

931
11
14

score 0 · Answer 7 · answered Aug 03 '20 at 17:11

Alternatively, if anything suggested above doesn't seems to be working for some reason, try using normalize.css package. It wipes all browser provided CSS and creates a fresh window for the app.

   "normalize.css": "^8.0.1" //package.json (yarn add or npm install)
   import "normalize.css/normalize.css"; //in app.js

Then in css file define the body height and width as 100vh & 100vw respectively.

docs: https://necolas.github.io/normalize.css/

score 0 · Answer 8 · answered Sep 20 '21 at 03:09

There are a lot of answers here but none of them is working. I have tested all of them. The best way to achieve minimum height in react js is to use the main tag inside your app and then add the minimum height for that tag.

Your App.js code should look like this.

<React.Fragment>
            <Header />
            <main>
                <Container>

                </Container>
            </main>
            <Footer />
</React.Fragment>

Note You can simply remove React.Fragment if you want to use empty fragments. then your code should look like this.

<>
    <Header />
    <main>

    //Write your code here

    </main>
    <Footer />
</>

Now add CSS to your CSS file.

main {
    min-height: 80vh;
}

Important Few things you have to keep in mind. Your header and footer or component call should be outside of the main tag. Like the code, I have shared above. I have called the header and footer outside the tag. If you want to use routing then simply add Router above the tag. Your code with routing and components call should look like this.

<React.Fragment>
            <Router>
                <Header />
                <main>
                    <Container>
                        <Route path='/' component={HomeScreen} exact />
                        <Route path='/products' component={ProductScreen} />
                        <Route path='/cart' component={CartScreen} />
                        <Route path='/login' component={LoginScreen} />
                    </Container>
                </main>
                <Footer />
            </Router>
        </React.Fragment>

CSS 100% height not working in React app

8 Answers8

Linked