html - Bootstrap 4 - 截面高度为 100% 的容器

Question

所以这里我遇到了 Bootstrap 4(还有 flexbox)的问题。这是代码: HTML:

<section id="intro">  
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col align-self-center">
                <h1>We design things</h1>
            </div>
        </div>
    </div>
</section>

和 CSS:

#intro {
    min-height: 65vh;
    background-image: url("../img/intro.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.container-fluid {
    height: 100%;
    min-height: 100%;
}

我希望 .container-fluid 始终是其父高度的 100%，因此如果部分有 100vh，容器也应该有，如果它有 50vh，它也应该有 50vh。我怎么做？如果它的高度是 h1 的高度，我不能使用 flexbox 居中。

Answer 1

一般来说，当你想要一个元素是它父元素的高度时，让父元素成为一个 flex 容器。

#intro {
    min-height: 65vh;
    background-image: url("../img/intro.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex; /* NEW */
}

flex 容器的初始设置是align-items: stretch。这意味着 flex 容器的子容器将自动拉伸(stretch)容器的整个cross-size。在行方向上，这将是高度。因此，将 display: flex 或 display: inline-flex 应用于 section#intro。