Html Bootstrap 4 - 具有 100% 截面高度的容器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41830769/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 - container with 100% height of section
提问by grhu
So here I have a problem with Bootstrap 4 (and also flexbox). Here is the code: HTML:
所以在这里我遇到了 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>
And CSS:
和 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%;
}
I want the .container-fluid to always be 100% of it's parent height, so if section has 100vh, container should also, if it has 50vh it also should have 50vh. How do I do that? I can't center something using flexbox if it's height is the height of h1.
我希望 .container-fluid 始终是其父高度的 100%，所以如果部分有 100vh，容器也应该，如果它有 50vh，它也应该有 50vh。我怎么做？如果高度是 h1 的高度，我无法使用 flexbox 将其居中。
采纳答案by Michael Benjamin
In general, when you want an element to be the height of its parent, make the parent a flex container.
一般来说，当你想让一个元素成为其父元素的高度时，让父元素成为一个 flex 容器。
#intro {
min-height: 65vh;
background-image: url("../img/intro.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
display: flex; /* NEW */
}
An initial setting of a flex container is align-items: stretch. This means that the children of a flex container will automatically stretch the full cross-sizeof the container. In row-direction that would be the height. Hence, apply display: flexor display: inline-flexto section#intro.
flex 容器的初始设置是align-items: stretch. 这意味着 flex 容器的子项将自动拉伸容器的整个横向尺寸。在行方向，这将是高度。因此，申请display: flex或display: inline-flex到section#intro。
