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 <div data-reactroot data-reactid='1'>
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 :)
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:
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_
Few arguments:
!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.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.
Source: Stackoverflow.com