容器未达到100％高度

Question

我使用bootstrap 4 class display: flex将容器设置为d-flex，但它不会达到100％高度。我希望列的高度为100％，因此我可以垂直居中。

以下是代码段：

#recruitment-header {
  background-image: url(http://cdn01.androidauthority.net/wp-content/uploads/2015/11/00-best-backgrounds-and-wallpaper-apps-for-android.jpg);
  background-size: cover;
  min-height: 400px;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
}
#recruitment-header .container, #recruitment-header .row {
  height: 100%;
}
#recruitment-header .slogan1 {
  font-size: 46px;
}

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>


<div id="recruitment-header" class="d-flex">
    <div class="container d-flex">
        <div class="row d-flex">
            <div class="col-12 d-flex flex-column justify-content-center">
                <div class="slogan1">message one</div>
                <div class="slogan2">message two</div>
            </div>
        </div>
    </div>
</div>

为什么它不会达到100％的高度？

Answer 1

尝试添加以下内容

#recruitment-header .container, #recruitment-header .row {
  flex-direction: column;
  flex: 1;
}