% 中的 CSS 高度仅适用于 React答案

【问题标题】：CSS height in % doesn't work only with React% 中的 CSS 高度仅适用于 React
【发布时间】：2016-03-18 10:59:37
【问题描述】：

我有一个奇怪的问题。我使用 React 渲染并使用纯 HTML 渲染完全相同的 DOM 和 CSS。但是，在 React 中，div.container 的子级在设置为 % 时无法获得正确的高度。使用 vh 或 px 设置时效果很好，但我不能使用它们。知道为什么吗？以及如何解决这个问题？

div.form label:after, div.wrapper:after, div.container:after {
  display: block;
  content: '.';
  clear: both;
  height: 0;
  visibility: hidden;
  line-height: 0;
  padding: 0;
  margin: 0;
}
body {
  width: 100%;
  margin: 0;
  min-width: 319px;
  min-height: 479px;
  background-color:black;
}
div.container {
  margin: 0 auto;
  width: 100%;
  height: auto;
  max-height: 1368px;
  max-width: 1368px;
  min-width: 319px;
  min-height: 100%;
  position: relative;
  background-color:red;
}
nav {
  width: 82px;
  height: 100%;
  height: 100vh;
  max-height: 1368px;
  float: left;
  z-index: 1000;
  overflow: hidden;
  background-color: #55c7f9;
}
header {
  height: 15%;
  margin: 0 6%;
  float: initial;
  position: relative;
  width: calc(100% - 80px);
  background-color:orange;
}
div.wrapper {
  min-height: calc(100% - 62px);
  height: auto;
  width: calc(100% - 80px);
  float: right;
  background-color:yellow;
}
div.main {
  width: 90%;
  height: 100%;
  box-sizing: border-box;
  margin: auto;
  padding-bottom: 10px;
  height: calc(100% - 158px);
  background-color:green;
}

<body>
  <div class="container">
    <nav></nav>
    <header></header>
    <div class="wrapper">
      <div class="main"></div>
    </div>
  </div>
</body>

【问题讨论】：

如果你检查你的浏览器控制台，你肯定会看到一个警告Warning: Unknown DOM property class. Did you mean className?
我的问题是渲染 DOM，而不是反应代码。在反应中我使用类名，但在 % 中设置高度不起作用。
请提供适当的详细信息：代码是渲染 DOM 还是反应代码，您使用的是哪个浏览器，您使用的是 webpack / browserify 等。
我使用 wbpack。这是通过 react 渲染的 DOM，我也有相同的 DOM 手写。虽然手写代码运行良好，但 react 渲染的代码忽略了 height:%。但是手写代码不需要 webpack。 webpack 可能是问题的根源吗？这个问题存在于我测试过的所有浏览器中：Chrome、Firefox、IE、Vivaldi、Opera。
然后添加你的 React 代码。请阅读正确提问的指南。 link

标签： html css reactjs height

【解决方案1】：

class 是 react 里面的 className。

<body>
  <div className="container">
    <nav></nav>
    <header></header>
    <div className="wrapper">
      <div className="main"></div>
    </div>
  </div>
</body>

【讨论】：

抱歉，不行。我在这里输入渲染的 DOM，而不是反应代码。

【解决方案2】：

一些可能对你有帮助的建议..

添加 html 以及正文。

html, body {
  height: 100%;
}

确保你的 bundle 被加载到的 div 的高度为：100%;。在下面的情况下，“root”将需要它。

<body>
  <div class="root"></div>
  <script src="./bundle.js"></script>
</body>

最后一种情况，如果你这样做：

<div>{this.props.children}</div>

确保给这个 div 一个 className 并将其添加到需要 100% 的事物列表中

【讨论】：

这对我有用。只需将我的反应根元素设置为 100% 高度。