Set a Div's height to cover the full screen in React

Set a Div's height to cover the full screen in React #

To set a Div's height to cover the full screen in React, set its height to 100vh, e.g. <div style={{height: '100vh'}}>...</div>. When the height of the element is set to 100vh, it covers 100% of the viewport's height.

Copied!
const App = () => {
  return (
    <div style={{height: '100vh'}}>
      <h2>hello world</h2>
    </div>
  );
};

export default App;

We used the vh unit to set a div's height to 100% of the viewport's height.

If you need to set the height of the root div in your React application, you can do that in your App.css file or in index.css.

Copied!
#root {
  height: 100vh;
}

And here is how you would import the App.css file for the style to take effect.

Copied!
// 👇️ import your css file
import './App.css';

const App = () => {
  return (
    <div>
      <h2>hello world</h2>
    </div>
  );
};

export default App;

The example above assumes that the root div element in your public/index.html file has an id set to root.

You should make sure that you're targeting the root div correctly.

The index.js file is the entry point of your React application, so it's always going to be ran.

On the other hand, if you import a CSS file into a component, the CSS styles might get removed once your component unmounts.