web-dev-qa-db-ja.com

Bootstrap 4-セクションの高さが100％のコンテナ

したがって、ここでBootstrap 4（およびflexbox）も問題があります。コードは次のとおりです。

<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でなければなりません。それ、どうやったら出来るの？ flexbox高さがh1の高さの場合、何かを中央に配置することはできません。

htmlcsstwitter-bootstrapflexbox
8
grhu

一般に、要素を親の高さにしたい場合は、親をflexコンテナにします。

#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。これは、フレックスコンテナの子がコンテナのcross-size全体を自動的にストレッチすることを意味します。行方向では、高さです。したがって、display: flexまたはdisplay: inline-flexからsection#intro。

7
Michael_B