html - 在高度为 100% 的 Bootstrap 4 flex 容器上填充

Question

我正在制作一个需要固定的 div，100% 高度并垂直居中对齐。而且它必须使用 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

You need to add the properties just to card-block and not 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