反应内部div高度100％

Question

大家好我刚才做出反应并坚持一个问题

问题： - 我的应用程序有很多div，如“root”，“component”和组件UI div当我设置我的组件UI div高度嵌套div为100％而不触及上部div的css而不添加100％在所有上部div而不是“body”中的高度，除此之外，我的组件UI（嵌套）div抓住全屏高度

希望你们了解我的问题，请帮助我解决问题

在这张图片中_logincard没有抓住整个身高

Answer 1

这不是反应问题，而是css one！这就是它的工作原理！

当你说height:100%它是用父母身高计算的！如果父级没有特定的高度浏览器无法确定孩子的高度百分比！

您可以使用的解决方案是css3 vuewport unit vh

div{ height:100vh; }

这将使你的div在不改变任何父属性的情况下占据100％的屏幕高度！视口单元相对于屏幕高度wirk，其中100vh = 100％屏幕高度！

Answer 2

尝试做

div{ height:100vh; }

当您输入vh =视口单位时，100 =屏幕的100％

Answer 3

这不是React问题。这就是css的工作原理。如果父容器没有指定的高度，则不能使用％来计算子元素的尺寸。您需要将容器的高度明确设置为body元素。