html - 在 Reactstrap 中更改卡片高度

Question

我正在使用 Reactstrap，为了让某个 Card 响应窗口的大小，我想用百分比而不是像素来固定它的纵横比。

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

第一行是问题所在。如果我将高度设置为一个常量，比如说 height:"200px"，它就会变成 200px 就好了。如果我更改宽度 %，它会更改宽度以匹配。但由于某种原因， height % 什么也没做。

<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

% 尺寸始终与当前元素的父容器相关。在这种情况下，您当前的元素是 Card，它的父元素是 ID 为 app 的 div，但它没有固定高度。您需要父容器的一些绝对值，然后您可以使其子元素具有其 % 维度。如果您修复 <div id="app">高度到一定值，Card 会跟随。

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

除非您指定特定高度，否则 block 元素的高度取决于其内容。因此，在涉及高度的父元素和子元素之间存在反馈，并且说 height: 50% 不会产生明确定义的值，除非您通过为父元素提供特定高度来打破反馈循环。

就宽度而言，body HTML 的默认宽度为 100% 并且它是 super 父元素，但它也没有定义高度，除非您指定它或添加扩展其高度的元素。