Html 更改卡带中的卡高度

我正在使用Reactstrap，为了使某张卡能够响应窗口的大小，我想用百分比而不是像素来固定其纵横比

出于某种原因，这适用于宽度，但不适用于高度。

第一行是问题。如果我将height设置为常量，比如说

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>

下一张图片
以前的图像

---

我是否应该使用另一种方式使其响应？

百分比维度始终与当前元素的父容器相关。在本例中，当前元素是Card，其父元素是id为app的div，但没有固定高度。

需要父容器的一些绝对值，然后可以使其子元素具有其%维度。如果您将高度固定到某个值，卡将随之移动

至于您的问题，为什么它适用于宽度而不适用于高度？

块元素的高度取决于其内容，除非指定特定高度。因此，在涉及高度的父元素和子元素之间存在反馈，并表示高度：50%不会产生定义良好的值，除非通过为父元素指定特定高度来打破反馈循环

就宽度而言，html的
正文
具有默认宽度100%及其超级父元素，但也没有定义高度，除非您指定它或添加扩展其高度的元素。
不要浪费时间设置边距和填充以及宽度或高度的像素/百分比，最好使用Reactstrap或Semantic UI，从中选择最适合您的内容。
维度百分比始终与当前元素的父容器相关。在本例中，当前元素是Card，其父元素是id为app的div，但没有固定高度。您需要拥有父容器的一些绝对值，然后可以使其子元素具有其%维度。如果您将高度固定到某个值，卡将随之显示。谢谢！非常有用。虽然我仍然不明白为什么当宽度工作正常时，高度遵循这个规则。更新了答案。