所以这里我有Bootstrap 4(以及flexbox)的问题.这是代码:HTML:

  
    

        

            

                
We design things
            
        
    

和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到section#intro.