React无法将div设置为屏幕高度的100%

Question

我正试图让App.js中的第一个div具有100%的高度：

应用程序：

body,
html {
height: 100%;
}

App.js:

function App() {
return <div style={{ height: "100%", backgroundColor: "red" }}></div>;
}

应用程序组件由index.js:默认呈现

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

结果是一个空白的白色屏幕，而不是红色屏幕。为什么div不依赖父屏幕(主体(，然后占用100%的高度？

编辑：我不能使用100vh技巧，我很高兴知道是什么原因导致身体的直系子女不能继承身体的属性，特别是在React中

Answer 1

您可以使用100vh(1vh相对于视口高度的1%(：

function App() {
return (
<div style={{ minHeight: "100vh", background: "red" }}></div>
);
}
ReactDOM.render(
<App />,
document.getElementById("root")
);

html,
body {
padding: 0;
margin: 0;
}

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<div id="root"></div>

或者，您必须遍历DOM树，并确保所有父元素都是100%高度：

function App() {
return (
<div style={{ height: "100%", background: "red" }}></div>
);
}
ReactDOM.render(
<App />,
document.getElementById("root")
);

html, body, #root {
height: 100%;
margin: 0;
padding: 0;
}

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

如果使用

height:'100vh'

它对我有用。vh=视图高度，React似乎对这个单位的响应有时比百分比更好。