Hi all I am new in react and stuck on one issue
Issue:- My application have lot of div like "root","component" and component UI div's when I set my component UI div height which is nested div to 100% without touching css of upper div also without adding 100% height in all upper div rather than "body" what I am excepting in this that my component UI (nested) div grab height of full screen
Hope guys you understand my issue please help me in issue
In this picture _logincard not grabbing whole height
Hi all I am new in react and stuck on one issue
Issue:- My application have lot of div like "root","component" and component UI div's when I set my component UI div height which is nested div to 100% without touching css of upper div also without adding 100% height in all upper div rather than "body" what I am excepting in this that my component UI (nested) div grab height of full screen
Hope guys you understand my issue please help me in issue
In this picture _logincard not grabbing whole height
Share Improve this question edited Jul 19, 2017 at 15:55 Nishant Dixit asked Jul 19, 2017 at 15:40 Nishant DixitNishant Dixit 5,5225 gold badges21 silver badges31 bronze badges 2- 1 Please provide some code. – vijayst Commented Jul 19, 2017 at 15:44
- @vijayst I updated my question with one photo which tell everything about my problem – Nishant Dixit Commented Jul 19, 2017 at 15:56
3 Answers
Reset to default 19This is not react issue but a css one! This is how it works!
When you say height:100% it is calculated using parents height! If parent don't have a specific height browser cannot determine child's height in percentage!
On solution you can use is css3 vuewport unit, vh
div{ height:100vh; }
This will make your div to take 100 percent height of screen without changing any parent properties! Viewport unit wirk with respect to screen height, where 100vh = 100% screen height!
This is not a React issue. This is how css works. If a parent container does not have a specified height, you cannot use % to calculate the dimensions of a child element. You will need to explicitly set the height of the containers up to the body element.
Try doing
div{ height:100vh; }
When you put vh = viewport unit, 100 = 100% of the screen