反应CSS root div完整浏览器高度 [英] react css root div full browser height

问题描述

我似乎无法获得react root div来填充浏览器页面.

I can't seem to get the react root div to fill the browser page.

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

I've tried adding the following CSS, and just about every combination of

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 }

推荐答案

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

You should be able to achieve this by setting height to 100% or 100vh of #root instead of #root > [data-reactroot]. This does depend on the rendered structure of your application. You may also need to set the height on multiple elements depending on how nested things are:

#root {
  height: 100vh;
}

这是 StackBlitz ，显示了正在使用的功能.您可能需要分叉它并对其进行更新，以使其更适合您的应用程序的结构，但这可能是唯一的问题，因为您定位的是#root的子对象，而不只是#root.

Here is a StackBlitz showing the functionality in action. You may need to fork it and update it to match more with the structure of your application, but it may be the only issue is you are targetting a child of #root instead of just #root.

希望有帮助！

这篇关于反应CSS root div完整浏览器高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！