html – Bootstrap 4 – 100％高度的容器

概述所以这里我有Bootstrap 4(以及flexbox)的问题.这是代码： HTML： <section id="intro"> <div class="container-fluid"> <div class="row align-items-center"> <div class="col align-self-center"> 所以这里我有bootstrap 4(以及flexBox)的问题.这是代码：
HTML：

<section ID="intro">      <div >        <div >            <div >                <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居中.

解决方法 通常,当您希望元素为其父元素的高度时,请将父元素设置为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 to section #intro.

总结

以上是内存溢出为你收集整理的html – Bootstrap 4 – 100％高度的容器全部内容，希望文章能够帮你解决html – Bootstrap 4 – 100％高度的容器所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。