React-组件全屏（高度100％）

我一直坚持显示一个名为“ home”的React组件，该组件占据屏幕高度的100％。无论我使用CSS还是React内联样式都行不通。

在下面的示例中，html，body和#app设置为height：CSS中为100％。对于.home，我使用了内联样式（但是无论我使用CSS还是内联样式都是相同的）： 问题似乎来自于<div data-reactroot data-reactid='1'>未设置高度：100％。

如果我使用Chrome开发人员工具对其进行了黑客入侵，则可以正常工作：

那么在React中显示全高组件的正确方法是什么？

欢迎任何帮助:)

html, body, #app, #app>div {
  height: 100%
}

这将确保所有链条 height: 100%

您也可以这样做：

body > #root > div {
  height: 100vh;
}

好几天困扰着我。最后，我利用CSS属性选择器来解决它。

[data-reactroot] 
        {height: 100% !important; }

尝试 <div style = {{height:"100vh"}}> </div>

我在我的app.css中使用CSS类对此进行了管理

.fill-window {
    height: 100%;
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
}

将其应用于render（）方法中的根元素

render() {
   return ( <div className="fill-window">{content}</div> );
}

或内联

render() {
   return (
      <div style={{ height: '100%', position: 'absolute', left: '0px', width: '100%', overflow: 'hidden'}}>
          {content}
      </div>
   );
}

虽然这可能不是理想的答案，但是请尝试以下操作：

style={{top:'0', bottom:'0', left:'0', right:'0', position: 'absolute'}}

它使尺寸附加在边框上，这不是您想要的，但效果却差不多。

#app {
  height: 100%;
  min-height: 100vh;
}

始终全视角最小

body{
  height:100%
}

#app div{
  height:100%
}

这对我有用。

尽管在这里使用了React-元素布局完全是html / css功能。

问题的根本原因height在于CSS中的属性如何工作。当您使用高度的相对值（以％为单位）时，这意味着将相对于其父级设置高度。

因此，如果您的结构类似html > body > div#root > div.app-要使其div.app高度达到100％，则其所有祖先的高度都应为100％。您可以使用下一个示例：

html {
  height: 100%;
}

body {
  height: 100%;
}

div#root {
  height: 100%; /* remove this line to see div.app is no more 100% height */
  background-color: indigo;
  padding: 0 30px;
}

div.app {
  height: 100%;
  background-color: cornsilk;
}

<div id="root">
  <div class="app"> I will be 100% height if my parents are </div>
</div>

很少参数：

• 的用法!important-尽管有一段时间，此功能在大约95％的情况下很有用，但它表示html / css的结构较差。而且，这不是当前问题的解决方案。
• 为什么不呢position: absolute？属性positon旨在更改相对于元素的呈现方式（自己的位置-相对，视口-固定，最接近的父对象位置不是静态的-绝对）。尽管Ansposition: absolute; top: 0; right: 0; bottom: 0; left: 0;会产生相同的外观-它还会促使您将父项更改position为其他项static-因此您需要保留2个元素。这也会导致父div折叠成一行（高度为0），并且内部为全屏。这在元素检查器中造成混乱。

将侧面导航面板的高度显示为100％时，我遇到了同样的问题。

我要解决的步骤是：

在index.css文件中------

.html {
   height: 100%;
}
.body {
   height:100%;
}

在sidePanel.css中（这给了我一些问题）：

.side-panel {
   height: 100%;
   position: fixed; <--- this is what made the difference and scaled to 100% correctly
}

为了清楚起见，删除了其他属性，但我认为问题在于将嵌套容器中的高度缩放到100％，例如您尝试如何缩放嵌套容器中的高度。父类的高度将需要应用100％。-我很好奇的是为什么要固定：位置会纠正刻度，如果没有刻度就会失败；这是我最终将通过更多实践学习的知识。

我已经与react工作了一个星期，而且我是Web开发的新手，但是我想分享一个发现的修复程序，该修复程序将高度缩放到100％。希望这对您或有类似问题的任何人有帮助。祝好运！

对于使用CRNA的项目，我在 index.css

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

然后在我的App.css中使用

.App {
  height: 100%;
}

并在应用中将div的高度设置为100％（如果存在以下情况，例如-

.MainGridContainer {
  display: grid;
  width: 100%;
  height:100%;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 50px auto;
}

将其添加到index.html头部对我有用：

<style>
    html, body, #app, #app>div { position: absolute; width: 100% !important; height: 100% !important; }
</style>

我遇到麻烦，直到我使用检查器并意识到react将所有内容放入id ='root'的div中，以使100％的高度以及body和html为我工作。

<div style={{ height: "100vh", background: "#2d405f" }}>
   <Component 1 />
   <Component 2 />
</div>

创建全屏且背景颜色为＃2d405f的div

尝试在高度上使用！important。这可能是由于其他样式影响了HTML正文。

{ height : 100% !important; }

您也可以在VP中提供值，该值会将高度设置为您提到的vie端口像素，height : 700vp;但这不会移植。