reactjs - 如何将蚂蚁卡片的高宽填充100%？

Question

我正在尝试填充 100% 的 ANT 卡高度，但是当我为孩子使用 100% 的高度时，它会崩溃。有谁知道怎么可能？我确定 ant Card 不等于 0% 因为它的父级有高度和宽度

<Card style={{ width: '100%', height: '100%', background: 'red'}} headStyle={{ backgroundColor: '#E6ECF0', }} bodyStyle={{padding: 0}} type="inner">
  <div style={{height: '100%', width: '100%'}}>
  </div>
</Card>

Answer 1

为了防止崩溃，您应该添加padding到您的卡中并使用box-sizing: border-box；

<Card style={{ width: '100%', height: '100%', background: 'red', box-sizing:  'border-box'}} headStyle={{ backgroundColor: '#E6ECF0', }} bodyStyle={{padding: '5px'}} type="inner">
  <div style={{height: '100%', width: '100%'}}>
  </div>
</Card>