[css] React - Component Full Screen (with height 100%)

I'm stuck with displaying a React component named "home" that take 100% of the height of my screen. Whatever I use CSS or React inline style it doesn't work.

In the example below, html, body and #app are set to height: 100% in CSS. For .home I used inline style (but whatever I used CSS or inline style is the same): enter image description here The issue seems to come from <div data-reactroot data-reactid='1'> that is not set with height: 100%.

If I hacked it with Chrome developer tool, it's work: enter image description here

So what is the proper way to display a full height component in React ?

Any help is welcome :)

This question is related to css reactjs html

The answer is


body{
  height:100%
}

#app div{
  height:100%
}

this works for me..


While this may not be the ideal answer but try this:

style={{top:'0', bottom:'0', left:'0', right:'0', position: 'absolute'}}

It keeps the size attached to borders which is not what you want but gives you somewhat same effect.


It annoys me for days. And finally I make use of the CSS property selector to solve it.

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

Adding this in the index.html head worked for me:

<style>
    html, body, #app, #app>div { position: absolute; width: 100% !important; height: 100% !important; }
</style>

html, body, #app, #app>div {
  height: 100%
}

This will ensure all the chain to be height: 100%


I managed this with a css class in my app.css

.fill-window {
    height: 100%;
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
}

Apply it to your root element in your render() method

render() {
   return ( <div className="fill-window">{content}</div> );
}

Or inline

render() {
   return (
      <div style={{ height: '100%', position: 'absolute', left: '0px', width: '100%', overflow: 'hidden'}}>
          {content}
      </div>
   );
}

try <div style = {{height:"100vh"}}> </div>


Despite using of React here - elements layout is completely html/css feature.

The root cause of the issue is in how height property in css works. When you are using relative values for height (in %) - this means that height will be set in relation to its parent.

So if you have a structure like html > body > div#root > div.app - to make div.app 100% height all its ancestors should have 100% height. You may play with next example:

_x000D_
_x000D_
html {_x000D_
  height: 100%;_x000D_
}_x000D_
_x000D_
body {_x000D_
  height: 100%;_x000D_
}_x000D_
_x000D_
div#root {_x000D_
  height: 100%; /* remove this line to see div.app is no more 100% height */_x000D_
  background-color: indigo;_x000D_
  padding: 0 30px;_x000D_
}_x000D_
_x000D_
div.app {_x000D_
  height: 100%;_x000D_
  background-color: cornsilk;_x000D_
}
_x000D_
<div id="root">_x000D_
  <div class="app"> I will be 100% height if my parents are </div>_x000D_
</div>
_x000D_
_x000D_
_x000D_

Few arguments:

  • Usage of !important - despite some time this feature is useful in ~95% of cases, it indicates a poor structure of html/css. Also, this is not a solution to the current problem.
  • Why not position: absolute. Property positon is designed to change how the element will be rendered in relation to (own position - relative, viewport - fixed, nearest parent whos position is not static - absolute). Ans despite position: absolute; top: 0; right: 0; bottom: 0; left: 0; will result in the same look - it also pushes you to change parents position to something not static - so you need to maintain 2 elements. That also causes parent div be collapsed in a line (0-height), and inner - full screen. That makes confusion in element inspector.

<div style={{ height: "100vh", background: "#2d405f" }}>
   <Component 1 />
   <Component 2 />
</div>

Create a div with full screen with background color #2d405f


You could also do:

body > #root > div {
  height: 100vh;
}

I had the same issue displaying my side navigation panel height to 100%.

My steps to fix it was to:

In the index.css file ------

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

In the sidePanel.css (this was giving me issues):

.side-panel {
   height: 100%;
   position: fixed; <--- this is what made the difference and scaled to 100% correctly
}

Other attributes were taken out for clarity, but I think the issue lies with scaling the height to 100% in nested containers like how you are trying to scale height in your nested containers. The parent classes height will need to be applied the 100%. - What i'm curious about is why fixed: position corrects the scale and fails without it; this is something i'll learn eventually with some more practice.

I've been working with react for a week now and i'm a novice to web developing, but I wanted to share a fix that I discovered with scaling height to 100%; I hope this helps you or anyone who has a similar issue. Good luck!


#app {
  height: 100%;
  min-height: 100vh;
}

Always full height of view min


For a project using CRNA i use this in index.css

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

and then in my App.css i use this

.App {
  height: 100%;
}

and also set height to 100% for a div within App if there is one eg-

.MainGridContainer {
  display: grid;
  width: 100%;
  height:100%;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 50px auto;
}

try using !important in height. It is probably because of some other style affecting your html body.

{ height : 100% !important; }

also you can give values in VP which will set height to viee port pixel you mention likeheight : 700vp; but this wont be portable.


I had trouble until i used the inspector and realized react puts everything inside a div with id='root' granting that 100% height along with body and html worked for me.


Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to reactjs

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0 TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined raised when starting react app Template not provided using create-react-app How to resolve the error on 'react-native start' Element implicitly has an 'any' type because expression of type 'string' can't be used to index Invalid hook call. Hooks can only be called inside of the body of a function component How to style components using makeStyles and still have lifecycle methods in Material UI? React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function How to fix missing dependency warning when using useEffect React Hook? Unable to load script.Make sure you are either running a Metro server or that your bundle 'index.android.bundle' is packaged correctly for release

Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment