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

Question

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

无顶： 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 端的问题。

Answer 1

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

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

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

ReactJS inline-style absolute top: "100vh" not working correctly

css

css-position

absolute

reactjs