html - 最小高度导致填充被忽略

Question

将 min-height 添加到 div 后，子元素在填充之外流动。下一个元素有 height: 100%，我认为这与它有关。

html, body { height: 100%;}
.card {height: 100%;}
.card-header {min-height: 50px;}
.card-block {height: 100%;}

<link data-require="bootstrap@4.1.3" data-semver="4.1.3" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script data-require="bootstrap@4.1.3" data-semver="4.1.3" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


        <div class="card">
          <div class="card-header">
            <div class="d-flex align-items-center flex-column">
              <div>line 1</div>
              <div>line 2</div>
              <div>line 3</div>
            </div>
          </div>
          <div class="card-block">
            Some other content
          </div>
        </div>

您可以在 this 中查看问题扑通一声。如果你简单地从 card-header 类中删除 min-height: 50px 代码，你可以看到它变大了一点。我想要一个最小高度，但仍然尊重填充。我真的不明白这里发生了什么。

Answer 1

kmgt 是正确的，因为 card-block 弄乱了你的尺寸。请记住，height: 100% 不会计算剩余高度。百分比相当复杂，但长话短说，这是相对于父容器使用它的最可靠方法。 card-block 和 min-height: 50px 之间的交互会打乱您的样式。

我们非常欢迎任何人加入进来，但我个人并不确定到底发生了什么。也就是说，解决方案是 flexbox。使父级 flex 并给 card-block，需要占据父级容器剩余大小的元素 flex-grow: 1.

html,
body {
  height: 100%;
}
.card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.card-header {
  min-height: 50px;
}
.card-block {
  flex-grow: 1;
}