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％的父高，所以如果section有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容器的子容器将自动拉伸容器的完整交叉大小。在行方向上，这将是高度。因此，请将display: flex或display: inline-flex应用于section#intro。

Bootstrap 4 - 容器截面高度为100％

1 个答案: