Bootstrap 4 - kontener z 100% wysokością sekcji

Question

Tutaj mam problem z Bootstrap 4 (a także flexbox). Oto kod: 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> 

i 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%; 
} 

chcę .container płynem, aby zawsze być w 100% na jego wysokość rodzicem, więc jeśli sekcja ma 100vh, pojemnik powinien także, jeśli ma 50vh to również powinno mieć 50vh. Jak mogę to zrobić? Nie potrafię wyśrodkować czegoś za pomocą flexboksa, jeśli jego wysokość to wysokość h1.

Answer 1

Ogólnie rzecz biorąc, jeśli chcesz, aby element był wysokością elementu nadrzędnego, ustaw dla niego kontener elastyczny.

#intro { 
    min-height: 65vh; 
    background-image: url("../img/intro.png"); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center; 
    display: flex; /* NEW */ 
} 

Początkowe ustawienie elastycznego pojemnika to align-items: stretch. Oznacza to, że dzieci pojemnika elastycznego automatycznie rozciągną pełny rozmiar o rozmiarze przekroju pojemnika. W kierunku rzędów, który byłby wysokością. Dlatego należy zastosować display: flex lub display: inline-flex do section#intro.