Question

无论如何，我可以告诉React组件全屏，背景颜色为绿色。下面的代码不会使高度达到100％。

var rootStyle = {
  backgroundColor : 'green',
  color : 'white',
  height : '100%'

}

class App extends Component {
  render() {
    return (
      <div style={rootStyle}>
      <Poll />
      </div>
    );
  }
}

Answer 1

问题不在于React。 React只是将HTML获取到页面。问题是您的body元素只与其内容一样大。解决这个问题的一种方法是将其添加到您的CSS：

html, body {
  width: 100%;
  height: 100%;
}

类似here

的东西

Answer 2

虽然上面的答案可能有用。下面的代码为我解决了这个问题。然后，您可以按照自己的方式设置App组件内部的样式。

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

Answer 3

你要问的更多的是＆＃34;让我的div块具有完整的窗口或parentDOMElement高度＆＃34;比如＆＃34;如何使ReactComponent具有完整窗口或parentDOMElement高度＆＃34;。

以下是解释此内容的帖子：CSS - Expand float child DIV height to parent's height

要点是父元素position必须是relative。然后，孩子（即你试图制作的元素高度为其容器的100％）实际上将有height 100％的容器。

这是一个演示：

<body>
<div id="title"></div>
<div class="parent">
    <div class="child">
    Hi, I am a child
    </div>
</div>
</body>
<style type="text/css">
    .parent {
        position: relative;
        background-color: rgba(50, 70, 200, 0.3);
        width: 100%;
        height: 200px;
    }
    .child {
        height: 100%;
        background-color: rgba(50, 70, 200, 0.3);
    }
</style>

有了它，你只需要在.parent div中渲染你的React组件并且应该可以工作。

Answer 4

使div成为视口高度的100％。

var rootStyle = {
  height: '100vh',
  min-height : '100vh'
}

Answer 5

var rootStyle = {
  backgroundColor : 'green',
  color : 'white',
  height : '100vh'
}

或

var rootStyle = {
  position: absolute,
  top: 0,
  left: 0,
  right: 0,
  bottom: 0
}

Answer 6

var rootStyle = {
  backgroundColor : 'green',
  color : 'white',
  height : '100%'
}

在这里，您仅将这种样式应用于div部分，因此需要在app.css中包含“ backgroundColor”属性

class App extends Component {
  render() {
    return (
      <div style={rootStyle}> // this style apply only its div not full screen
      <Poll />
      </div>
    );
  }
}

App.css
html,body{backgourd:green}

ReactJS样式化组件以全屏显示背景颜色

6 个答案: