ブートストラップ4 - セクションの高さが100％のコンテナ

Question

ここでは、ブートストラップ4（およびフレックスボックス）に問題があります。ここでは、コードです： 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%; 
} 

私はいつもそれを100％とし.container流体は、親の高さなのでセクションは100VHを持っている場合したい、コンテナがすべきまた、もしそれが50vhを持っているなら、それはまた50vhを持つべきです。それ、どうやったら出来るの？もし高さがh1の高さであれば、私はflexboxを使って何かを中心にすることができません。

Answer 1

一般に、要素を親の高さにする場合は、親をフレックスコンテナにします。

#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です。これは、フレックスコンテナの子供が自動的にコンテナのクロスサイズを伸ばすことを意味します。行方向では高さになります。したがって、display: flexまたはdisplay: inline-flexをsection#introに適用してください。