html - react css root div 全浏览器高度

Question

我似乎无法让 react 根 div 来填充浏览器页面。

我已经尝试添加以下 CSS，以及几乎所有的组合

html, body {
    margin: 0;
    height: 100%;
}
.fill-height {
    min-height: 100%;
    height:auto !important; /* cross-browser */
    height: 100%; /* cross-browser */
}

#root > [data-reactroot] { height: 100vh }

Answer 1

您应该可以通过设置 height 来实现这一点。至 100%或 100vh的 #root而不是 #root > [data-reactroot] .这确实取决于应用程序的呈现结构。您可能还需要设置 height在多个元素上取决于嵌套事物的方式:

#root {
  height: 100vh;
}

这是一个 StackBlitz显示正在运行的功能。您可能需要对它进行 fork 并更新它以与您的应用程序的结构更加匹配，但可能唯一的问题是您的目标是 #root 的 child 。而不仅仅是 #root .

希望这有帮助!