100％高度的容器

所以在这里我遇到了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居中。

---

一般来说，当你想要一个元素作为其父元素的高度时，使父元素成为一个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 。 这意味着柔性容器的孩子将自动拉伸容器的整个横截面尺寸。 在行方向上，这将是高度。 因此，将display: flex或display: inline-flex应用于section#intro 。

链接地址: http://www.djcxy.com/p/38165.html

上一篇: container with 100% height of section

下一篇: Is it possible to do conditional content projection (transclusion) in angular 2+