Question

我正在尝试在React App中执行此操作： https://jsfiddle.net/u4gctqv2/1/

但是在示例链接中有效时，在react应用中高度不会调整大小。

该应用呈现回报：

return (
      <div className="row0">
        <div className="row1"><p>1</p></div>
        <div className="row2"><p>2</p></div>
        <div className="row3"><p>3</p></div>
      </div>
    );

示例的CSS代码链接到App.css中。实际上，是应用背景色的。

有什么不同的方法可以使它在反应中起作用？

谢谢！

Answer 1

您的react应用程序位于其中的根元素。确保在CSS中将该元素的高度设置为100％。请记住，以百分比为单位使用高度，每个父元素也必须具有100％的高度。因此，请使用开发人员工具检查您的应用，并确保所有父元素的高度都为100％。

Answer 2

当您要使用flexbox样式化组件时，必须对元素使用此结构：

在您的组件中：

<div className="container">
  <div className="row1"> Row 1 </div>
  <div className="row2"> Row 1 </div>
</div>

并在CSS文件中：

.container{
  display: flex;
  flexDirection: column;
}

.row1 {
  background: blue;
  flex: 2
}

.row2 {
  background: wheat;
  flex: 4;
}

有关flexbox样式的更多信息，请查看以下链接： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

使用flexbox下时高度未调整大小

2 个答案: