React - Component Full Screen (with height 100%)
CssReactjsHtmlCss Problem Overview
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 :)
Css Solutions
Solution 1 - Css
html, body, #app, #app>div {
height: 100%
}
This will ensure all the chain to be height: 100%
Solution 2 - Css
You could also do:
body > #root > div {
height: 100vh;
}
Solution 3 - Css
try <div style = {{height:"100vh"}}> </div>
Solution 4 - Css
It annoys me for days. And finally I make use of the CSS property selector to solve it.
[data-reactroot]
{height: 100% !important; }
Solution 5 - Css
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>
);
}
Solution 6 - Css
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 {
height: 100%;
}
body {
height: 100%;
}
div#root {
height: 100%; /* remove this line to see div.app is no more 100% height */
background-color: indigo;
padding: 0 30px;
}
div.app {
height: 100%;
background-color: cornsilk;
}
<div id="root">
<div class="app"> I will be 100% height if my parents are </div>
</div>
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
. Propertypositon
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 despiteposition: absolute; top: 0; right: 0; bottom: 0; left: 0;
will result in the same look - it also pushes you to change parentsposition
to something notstatic
- 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.
Solution 7 - Css
#app {
height: 100%;
min-height: 100vh;
}
Always full height of view min
Solution 8 - Css
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.
Solution 9 - Css
body{
height:100%
}
#app div{
height:100%
}
this works for me..
Solution 10 - Css
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!
Solution 11 - Css
<div style={{ height: "100vh", background: "#2d405f" }}>
<Component 1 />
<Component 2 />
</div>
Create a div with full screen with background color #2d405f
Solution 12 - Css
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;
}
Solution 13 - Css
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>
Solution 14 - Css
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.
Solution 15 - Css
CRA has a #root div to which we render our react app, so it should also be considered a parent div and give appropriate height according to your need. This answer is based on my experience with a similar situation and giving 100% height to #root helped me fix the height issue with one of it's child element.
This depends on the layout of your app, in my case the child was not able to takeup the given height because #root(parent) div had no specified height
Solution 16 - Css
Try it to solve your problem
<div style = {{height:"100vh"}}> </div>
Solution 17 - Css
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.