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

Question

I have a basic component inside of my App.js called Overlay. It's just a div and I am trying to position it using absolute positioning but when I try to set the top style from inline-styles, the component does not leave the view; however, when I set top using a separate stylesheet, it works fine. I've included side-by-side pictures of inline vs. stylesheet and would like to know how to make the inline be the same as the stylesheet. Thanks in advance.

No-Top: No Top Styling

Inline-Top: Inline Top Styling

Stylesheet-Top: Stylesheet Top

Code:

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); */
}

Edit: The issue seems to be that react's hot-reload does not update the inline styles correctly sometimes and needs to be reloaded manually in order to get applied. Seems to be an issue on React's end.

Answer 1

The code works fine, just to show you, in code, I have added backgroundColor.

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