到达浏览器高度时垂直对齐内容和滚动框

Question

我有一个要垂直居中的表单，通过单击链接（addAnother）每次将输入添加到html，并在到达浏览器高度时将其滚动应用于其容器。我正在使用display: table-cell和overflow-y: scroll，但是内容在中间对齐。

<div class="row justify-content-center align-items-center">
    <div class="col-12 col-sm-10 col-md-8 col-xl-6">
        <div id="spaceTeammatesBox" class="space-box form animated fadeInLeft">
            <div class="team-emails-outer">
                <div class="team-emails-inner">
                    <h3 class="mb-4">{% trans "Who is on your team?" %}</h3>
                    <div class="form-group forms">
                        <input type="email" class="form-control form-input" aria-describedby="email" autocomplete="off">
                        <span class="input-line" data-placeholder="Ex. [email protected]"></span>
                    </div>
                    <div class="form-group forms">
                        <input type="email" class="form-control form-input" aria-describedby="email" autocomplete="off">
                        <span class="input-line" data-placeholder="Ex. [email protected]"></span>
                    </div>
                    <div class="form-group forms">
                        <input type="email" class="form-control form-input" aria-describedby="email" autocomplete="off">
                        <span class="input-line" data-placeholder="Ex. [email protected]"></span>
                    </div>
                </div>
                <div>
                    <div class="add-teammate-link d-flex flex-row-reverse text-right">
                        <a href="#" id="addAnother">{% trans "add another" %}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

在js中，我有：

$('#addAnother').click(function() {
        $('#spaceTeammatesBox').find('.form-group.forms').last().after(`
            <div class="form-group forms">
                <input type="email" class="form-control form-input" aria-describedby="email" autocomplete="off">
                <span class="input-line" data-placeholder="Ex. [email protected]"></span>
            </div>
        `);
    });

在CSS中：

#spaceTeammatesBox {
    background: lightblue;
    display: table;
    width: 100%;
}

.team-emails-outer {
    display: table-cell;
    width: 100%;
}

.team-emails-inner {
    height: calc(100vh - 100px);
    overflow-y: scroll;
}

我如何在bootstrap 4中同时具有垂直对齐和垂直滚动？预先感谢您的帮助。

Answer 1

为此，您可以使用两个容器：一个用于垂直放置东西，另一个用于滚动。在您的帮助下，我将向<div class="team-emails-inner">添加一个新的类centered-content。然后，我将把这个div的内容包装在另一个具有类scroll-box的容器中。这两个类的css看起来像这样：

.centered-content {
  display: flex;
  align-items: center; /* this vertically centers the child container */
}

.centered-content .scroll-box {
  max-height: 100%; /* this prevent the scroll-box to overflow the height of the parent */
  width: 100%; /* this pushes the scrollbar to the very edge of the box */
  overflow: auto; /* and this allows the scroll to appear only when necessary */
}

整个过程如下：

$('#addAnother').click(function() {
  $('#spaceTeammatesBox').find('.form-group.forms').last().after(`
            <div class="form-group forms">
                <input type="email" class="form-control form-input" aria-describedby="email" autocomplete="off">
                <span class="input-line" data-placeholder="Ex. [email protected]"></span>
            </div>
        `);
});

#spaceTeammatesBox {
  background: lightblue;
  width: 100%;
}

.team-emails-inner {
  height: calc(100vh - 100px);
  padding: 10px;
}

.centered-content {
  display: flex;
  align-items: center;
}

.centered-content .scroll-box {
  max-height: 100%;
  width: 100%;
  overflow: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="row justify-content-center align-items-center">
  <div class="col-12 col-sm-10 col-md-8 col-xl-6">
    <div id="spaceTeammatesBox" class="space-box form animated fadeInLeft">
      <div class="team-emails-outer">
        <div class="team-emails-inner centered-content">
          <section class="scroll-box">
            <h3 class="mb-4">{% trans "Who is on your team?" %}</h3>
            <div class="form-group forms">
              <input type="email" class="form-control form-input" aria-describedby="email" autocomplete="off">
              <span class="input-line" data-placeholder="Ex. [email protected]"></span>
            </div>
            <div class="form-group forms">
              <input type="email" class="form-control form-input" aria-describedby="email" autocomplete="off">
              <span class="input-line" data-placeholder="Ex. [email protected]"></span>
            </div>
            <div class="form-group forms">
              <input type="email" class="form-control form-input" aria-describedby="email" autocomplete="off">
              <span class="input-line" data-placeholder="Ex. [email protected]"></span>
            </div>
          </section>
        </div>
        <div>
          <div class="add-teammate-link d-flex flex-row-reverse text-right">
            <a href="#" id="addAnother">{% trans "add another" %}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>