Bootstrap 4 - 部分高度为 100% 的容器

Posted 2023-03-05

【中文标题】Bootstrap 4 - 部分高度为 100% 的容器

【英文标题】：Bootstrap 4 - container with 100% height of section

【发布时间】：2017-06-09 09:42:10

【问题描述】：

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

【参考方案1】：

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

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

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

【讨论】：

不幸的是，这不起作用 - 容器现在居中，但它仍然具有 h1 元素的高度，而不是部分。

您的问题是关于使container-flud 与父级高度相同。

这里是整个代码：codepen.io/GRHU/pen/jywoQV 是的，我想制作 .container-fluid，它位于#intro 部分的完整高度，它的父级是 65vh，然后使用 Bootstrap 4 类使其水平和垂直居中。

Flex layout only works between parent and child。如果你想将弹性属性应用到h1，那么你需要将它的父级设为弹性容器（并移除人工高度）：revised codepen

Adding display: flex to .container-fluid 修复了它，但我很确定应该使用 flexbox 构建的 Boostrap 4 默认具有它 - 结果只有行具有 flex 属性这很奇怪。感谢您的帮助。