Question

我正在使用Reactstrap，为了使某个卡响应窗口的大小，我想用百分比而不是像素来修正它的宽高比。

出于某种原因，这适用于宽度但不适用于高度。 https://codepen.io/anon/pen/xpwOGL

第一行是问题。如果我将高度设置为常量，比如说height:"200px"，它会使200px正常。如果我改变宽度％，它将改变宽度以匹配。但由于某种原因，身高％只是没有做任何事情。

<Card style={{width:"80%", height:"60%"}}> 
   <Row className="no-gutters" style={{position: "absolute"}}>
      <Col xs="auto">
        <button>
          Next image
        </button>
      </Col>
      <Col xs="auto">
        <button>
          Previous image
        </button>
      </Col>
    </Row>
 </Card>

我应该采用不同的方式来实现这种响应吗？

Answer 1

％维度始终位于当前元素的relation to the parent container中。在这种情况下，您当前的元素是Card，其父元素是具有id app的div，但它没有固定高度。您need to have some absolute value of the parent container，然后您可以使其子元素具有％维度。如果您将高度固定为某个值，卡将会跟随。

至于你的查询为什么它适用于宽度但不适用于高度？

除非指定特定高度，否则块元素的高度取决于其内容。因此父母和孩子之间存在高度反馈，并说高度：50％不会产生明确定义的值，除非您通过给父元素指定特定高度来打破反馈循环。

就宽度而言，html的body的默认宽度为 100％及其超级父元素但除非您定义了高度指定它或添加扩展其高度的元素。

Answer 2

不要浪费时间设置边距和填充以及宽度或高度的像素/百分比，最好使用 Reactstrap 或语义 UI 并从中选择最适合您的。

在Reactstrap中更改卡高度

2 个答案: