反应内部 div 高度 100%答案

【问题标题】：React inner div height 100%反应内部 div 高度 100%
【发布时间】：2017-07-19 15:40:40
【问题描述】：

大家好，我是新来的反应并停留在一个问题上

问题：- 当我将嵌套 div 的组件 UI div 高度设置为 100% 而不触及上部 div 的 css 也没有添加 100% 时，我的应用程序有很多 div，例如“root”、“component”和组件 UI div所有上部 div 中的高度而不是“body”我除了我的组件 UI（嵌套）div 抓取全屏的高度

希望大家理解我的问题，请帮助我解决问题

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

【问题讨论】：

请提供一些代码。
@vijayst 我用一张照片更新了我的问题，它说明了我的问题的一切

标签： javascript css reactjs

【解决方案1】：

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

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

您可以使用的解决方案是 css3 vuewport 单元，vh

div{ height:100vh; }

这将使您的 div 在不更改任何父属性的情况下占据屏幕 100% 的高度！视口单位 wirk 与屏幕高度相关，其中 100vh = 100% 屏幕高度！

【讨论】：

好的，但是如果我有一个高度为 75vh 的 div1 并且还有另一个 div2 在 div1 内部，但不完全位于 div1>div2 之后，它可能就像这样 div1>..div..>div2 我需要 div2 从 div1 抓取所有高度
不可能使用 css，父级需要特定的高度或为该子 div 提供与所需父级高度相同的高度，即 75vh！但如果你改变了那个高度，你必须同时改变！（如果设计允许，您可以只给孩子高度，即 75vh，所有包装器 div 的大小都会随着孩子的大小而增长）
// 上 div ._card { 宽度：65vh;高度：75vh；背景：橙色；位置：绝对；左：17.5vh；最高：12.5vh； } //嵌套 div ._loginLeft { height: 75vh;背景颜色：橙色； _loginLeft 在卡里面我不想要 .loginleft 中的 75vh 这取决于上 div 高度你能建议我一些东西而不是 .loginleft 中的 75vh

【解决方案2】：

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

【讨论】：

【解决方案3】：

尝试做

div{ height:100vh; }

当你把 vh = viewport unit 时，100 = 100% 的屏幕

【讨论】：