React - Component Full Screen with height 100

Question

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    The issue seems to come from  lt div data-reactroot data-reactid  1  gt  that is not set with height  100    If I hacked it with Chrome developer tool  it s work    So what is the proper way to display a full height component in React    Any help is welcome

User · Answer

html  body   app   app gt div     height  100      This will ensure all the chain to be height  100

User · Answer

app     height  100     min-height  100vh      Always full height of view min

User · Answer

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

User · Answer

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

User · Answer

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   lt --- 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

User · Answer

Adding this in the index html head worked for me    lt style gt      html  body   app   app gt div   position  absolute  width  100   important  height  100   important     lt  style gt

User · Answer

lt div style    height   quot 100vh quot   background   quot  2d405f quot     gt      lt Component 1   gt      lt Component 2   gt   lt  div gt   Create a div with full screen with background color  2d405f

User · Answer

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  gt  body  gt  div root  gt  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   lt div id  root  gt  x000D     lt div class  app  gt  I will be 100  height if my parents are  lt  div gt  x000D   lt  div gt  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

User · Answer

body    height 100      app div    height 100      this works for me

User · Answer

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

User · Answer

You could also do   body  gt   root  gt  div     height  100vh

User · Answer

try  lt div style     height  100vh    gt   lt  div gt

User · Answer

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    lt div className  fill-window  gt  content  lt  div gt         Or inline  render        return          lt div style    height   100    position   absolute   left   0px   width   100    overflow   hidden    gt             content         lt  div gt

User · Answer

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

User · Answer

It annoys me for days  And finally I make use of the CSS property selector to solve it    data-reactroot            height  100   important

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

Examples related to css

Examples related to reactjs

Examples related to html