响应css根div完全浏览器高度

Question

我似乎无法让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 of #root而不是#root > [data-reactroot]来实现这一点。这确实取决于应用程序的呈现结构。您还可能需要根据嵌套事物的方式在多个元素上设置height：

#root {
  height: 100vh;
}

下面是一个StackBlitz，它显示了实际的功能。您可能需要对其进行分叉并进行更新，以使其更符合应用程序的结构，但这可能是唯一的问题，即您正在获取一个#root的子程序，而不仅仅是#root。

希望这能帮上忙！