ReactJS 内联样式绝对顶部：“100vh”无法正常工作答案

【问题标题】：ReactJS inline-style absolute top: "100vh" not working correctlyReactJS 内联样式绝对顶部：“100vh”无法正常工作
【发布时间】：2020-06-07 06:31:00
【问题描述】：

我的 App.js 中有一个名为 Overlay 的基本组件。它只是一个 div，我正在尝试使用绝对定位来定位它，但是当我尝试从 inline-styles 设置顶部样式时，组件不会离开视图；但是，当我使用单独的样式表设置顶部时，它可以正常工作。我已经包含了内联与样式表的并排图片，并且想知道如何使内联与样式表相同。提前致谢。

无顶部： No Top Styling

内联顶部：Inline Top Styling

样式表顶部：Stylesheet Top

代码：

Overlay.js

import React from "react";
import "./Overlay.css";

class Overlay extends React.Component {
  render() {
    return (
      <div
        className="Overlay" style={{ top: "calc(100vh - 60px)" }}
      ></div>
    );
  }
}

export default Overlay;

Overlay.css

.Overlay {
  height: calc(485px - 16px);
  width: calc(100vw - 16px);
  background-color: white;
  color: black;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  padding: 8px;
  position: absolute;
  /* top: calc(100vh - 60px); */
}

编辑：问题似乎是 react 的热重载有时不能正确更新内联样式，需要手动重新加载才能应用。似乎是 React 的一个问题。

【问题讨论】：

我刚刚测试了你的代码，两种方式都一样。看看：codesandbox.io/s/ecstatic-morse-2imy0?file=/src/App.js
这段代码应该可以工作
这很奇怪......当我将它加载到我身边时，它有时会正常工作，有时它会像显示的图片一样加载。 react 的热刷新方式是否会导致这种情况？

标签： css reactjs css-position absolute

【解决方案1】：

代码运行良好，只是为了向您展示，在代码中，我添加了 backgroundColor。

<div className="Overlay" style={{ top: "calc(100vh - 200px)" , backgroundColor: "yellow"}}></div

【讨论】：