Question

我正在尝试在我的React应用程序中使用Flexbox来创建一个占据整个宽度和高度的简单双列网页。

我可以让它自己使用HTML和CSS，但不能在React应用程序中使用。

到目前为止，我有：

:root {
  overflow-x: hidden;
  height: 100%;
}

body {
  min-height: 100%
}

.flexbox {
  height: 100%;
  display: flex;
}

.left {
  flex: 0 0 200px;
  height: 100%
}

.right {
  flex: 1
}

和

<div class="flexbox">
  <div class="left">
    Left
  </div>
  <div class="right">
    Right
  </div>
</div>

我意识到我需要在<div id="root"></div>中考虑额外的index.html标记，因此我还在css中添加了以下内容：

#root {
  height: 100%;
}

我的render功能：

render() {
  return (
    <div className="flexbox">
      <div className="left">Left</div>
      <div className="right">Right</div>
    </div>
  )
}

但这不起作用。列存在但不是全高。为什么不呢？

Answer 1

在css中使用视口高度单位：

dataProtector = provider.CreateProtector(purpose);

Answer 2

Body查看其父级（HTML）以了解如何扩展动态属性，因此HTML元素也需要设置它的高度。

然而，身体的内容可能需要动态改变。将min-height设置为100％将实现此目标。

html {
  height: 100%;
}
body {
  height: 100%;
}

Answer 3

您忘记了setState()也是一个标签。而且，它是所有父母的父母！这就是为什么你应该给它100％的高度。

<html>

Answer 4

如果使用create-react-app，则会向DOM中添加一个带有class=App的元素和一个ID为root的元素。他们还应该得到height: 100%

html, body, #root, .App {
  height: 100%;
}

Answer 5

试试这个：

[data-reactroot] 
        {height: 100% !important; }

Answer 6

向页面的父div添加以下CSS。

position: fixed;
overflow: auto;
height: 100vh;

Answer 7

或者，如果上述建议由于某些原因似乎不起作用，请尝试使用normalize.css软件包。它将清除所有浏览器提供的CSS，并为该应用程序创建一个新窗口。

   "normalize.css": "^8.0.1" //package.json (yarn add or npm install)
   import "normalize.css/normalize.css"; //in app.js

然后在css文件中将车身高度和宽度分别定义为100vh和100vw。

docs：https://necolas.github.io/normalize.css/

CSS 100％高度在React应用程序中不起作用

7 个答案: