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

即可

您需要将属性添加到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

填充Bootstrap 4 flex容器，高度为100％

1 个答案: