React内部div高度100%

Question

大家好，我是React的新手，遇到了一个问题：

问题：我的应用程序有很多div，比如"root"、"component"和组件UI div。当我将我的组件UI div（嵌套的div）的高度设置为100%，而不触碰上层div的CSS，也不在所有上层div中添加100%的高度，而只是添加在"body"中时，我希望我的组件UI（嵌套）div占据整个屏幕的高度。

希望大家能够理解我的问题，请帮助我解决这个问题。

在这张图片中，“_logincard”没有占满整个高度。

- Nishant Dixit

---

请提供一些代码。 - vijayst

@vijayst，我更新了我的问题，并附上了一张照片，它能够清楚地说明我的问题。 - Nishant Dixit

Answer 1

这不是React问题，而是CSS问题！它的工作原理如下：

当您使用height:100％时，它会使用父元素的高度进行计算！如果父元素没有特定的高度，则浏览器无法确定子元素的百分比高度！

您可以使用的一种解决方法是CSS3视窗单位vh。

div{ height:100vh; }

这将使您的 div 占据整个屏幕高度而不改变任何父元素属性！视窗单位是相对于屏幕高度工作的，其中 100vh = 100% 屏幕高度！

- demonofthemist

---

好的，但是如果我有一个高度为75vh的div1，还有另一个div2在div1内部，不是紧接着div1>div2。它可能像这样：div1>..div..>div2 我需要div2获取div1的全部高度。 - Nishant Dixit

无法使用 CSS 实现，父元素需要具有特定的高度或将子 div 的高度设置为所需的父元素高度，即 75vh！但是，如果您更改了该高度，则必须同时更改两个高度！（如果设计允许，您可以只给子元素设置高度，即 75vh，所有包装器 div 将根据子元素增大） - demonofthemist

//上层div ._card { 宽度：65vh; 高度：75vh; 背景：橙色; 位置：绝对; 左侧：17.5vh; 顶部：12.5vh; } //嵌套div ._loginLeft { 高度：75vh; 背景颜色：橙色; } _loginLeft在卡片内，我不想在.loginleft中使用75vh，它取决于上层div的高度，你能给我提供一些建议吗？ - Nishant Dixit

Answer 2

这不是React的问题，而是CSS的工作方式。如果父容器没有指定高度，你就不能使用百分比来计算子元素的尺寸。你需要显式地设置容器的高度，直到body元素。

- Kyle Richardson

Answer 3

尝试执行。

div{ height:100vh; }

当你将vh设置为视口单位时，100即为屏幕的100％。

- Danielle Cohen