React inner div height 100%

Question

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

Answer 1

This 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!

Answer 2

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.

Answer 3

Try doing

div{ height:100vh; }

When you put vh = viewport unit, 100 = 100% of the screen