Bootstrap 4 flex 容器上的填充，高度为 100%

Question

我正在制作一个需要固定、100% 高度和垂直居中对齐的 div。它必须使用 Bootstrap 4 来完成。除了添加填充之外，我已经管理了所有这些。每当我向子 div 添加填充时，内容都会离开屏幕。我什至尝试过

overflow-y: scroll

希望它会修复它，但没有任何反应。

因为被截断的代码没有在此处显示应显示的所有内容，所以这里是a codepen link。

有人可以看看我的代码，让我知道我做错了什么吗？

.card {
  color: #fff;
  background: tomato;
  position: fixed;
  min-height: 100%;
  /* height: 100%; */
  width: 340px;
  right: 0;
  top: 0;
  overflow: scroll;
}

.card-block {
  padding: 100px;
  margin: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="card rounded-0 d-flex justify-content-center">

  <div class="card-block align-self-center">
    <h1>This is a title</h1>
    <h5>This is a subtitle</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in laoreet neque. Praesent tincidunt justo a magna tempor vulputate. Phasellus euismod feugiat sem. Nam tempus nec nisl id viverra. Cras blandit erat mauris. Cras non commodo quam. Mauris
      auctor ligula vitae erat mollis, quis convallis diam consequat. Nullam ac magna vitae lorem elementum vehicula nec rhoncus nisl. Nullam dignissim at nunc a congue. Sed fringilla pulvinar consequat. Curabitur interdum, nunc in finibus auctor, tortor
      libero facilisis felis, id maximus nibh ex eu nunc. Nunc in molestie lorem, bibendum maximus ipsum. Vestibulum ac finibus risus.</p>
    <a href="#" class="btn btn-secondary">This is a button</a>
  </div>
</div>

Answer 1

只需将bottom:0 添加到您的班级card-block

您只需将属性添加到card-block 而不是card

.card-block {
  padding: 0px 40px;
  margin: auto;
  color: #fff;
  background: tomato;
  position: fixed;
  width: 340px;
  top: 0;
  bottom:0;
  right: 0;
  overflow-y: scroll;
}

随意更改padding、margin 和width。因为它们仍将保持滚动不变。

检查这个CODEPEN