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

发布时间：2020-12-14 18:41:47 所属栏目：资源来源：网络整理

导读：所以这里我有Bootstrap 4(以及flexbox)的问题.这是代码： HTML： section id="intro" div class="container-fluid" div class="row align-items-center" div class="col align-self-center" h1We design things/h1 /div /div /div/section 和CSS： #intro {

所以这里我有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居中.

解决方法

通常,当您希望元素为其父元素的高度时,请将父元素设置为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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!