在 React 中设置一个 Div 的高度以覆盖整个屏幕
要在 React 中设置 Div 的高度以覆盖整个屏幕,请将其高度设置为 ,例如 。 当元素的高度设置为 100vh 时,它会覆盖 100% 的视口高度。
const App = () => {
return (
<div style={{height: '100vh'}}>
<h2>hello world</h2>
</div>
);
};
export default App;
我们使用 vh 单位将 的高度设置为视口高度的 **100%**。
如果我们需要在 React 应用程序中设置根 的高度,我们可以在 App.css 文件或 index.css 中进行设置。
#root {
height: 100vh;
}
下面是导入 App.css 文件以使样式生效的方法。
// 👇️ import your css file
import './App.css';
const App = () => {
return (
<div>
<h2>hello world</h2>
</div>
);
};
export default App;
上面的示例假定 public/index.html 文件中的根 div 元素的 id 设置为 root。
我们应该确保正确定位根 。
在 React 中导入全局 CSS 文件时,最佳做法是将 CSS 文件导入到 文件中。
index.js 文件是 React 应用程序的入口点,因此它始终会运行。
另一方面,如果我们将 CSS 文件导入到组件中,则一旦我们的组件卸载,CSS 样式可能会被删除。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供,仅供学习和研究使用。如您对本站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。