在 React 中设置一个 Div 的高度以覆盖全屏

作者

在 React 中设置一个 Div 的高度来覆盖全屏

Set a Div’s height to cover the full screen in React

要在 React 中设置 Div 的高度以覆盖整个屏幕，请将其高度设置为
100vh.

当元素的高度设置为 时100vh，它会覆盖视口高度的 100%。

应用程序.js
const App = () => {
  return (
    <div style={{height: '100vh'}}>
      <h2>hello world</h2>
    </div>
  );
};

export default App;

我们使用该vh单位将 div 的高度设置为视口高度的 100%。

设置根的高度div覆盖全屏

如果你需要在你的 React 应用程序中设置根的高度div，你可以在你的App.css文件或index.css.

应用程序.css
#root {
  height: 100vh;
}

以下是导入文件App.css以使样式生效的方法。

应用程序.js
// 👇️ import your CSS file
import './App.css';

const App = () => {
  return (
    <div>
      <h2>hello world</h2>
    </div>
  );
};

export default App;

上面的示例假定文件div中的根元素
设置为.public/index.htmlidroot

您应该确保root正确定位 div。

在 React 中导入全局 CSS文件时，最佳做法是将 CSS 文件导入到您的index.js文件中。

该index.js文件是您的 React 应用程序的入口点，因此它始终会运行。

另一方面，如果将 CSS 文件导入到组件中，一旦组件卸载，CSS 样式可能会被删除。

我还写了一篇关于
如何获取元素的高度和宽度的教程。

如果您需要检查某个元素是否在视口中，请单击
以下文章。