Bootstrap 4 - контейнер со 100% высотой раздела

Question

Итак, у меня есть проблема с 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-жидкость всегда 100% от его родителя высоты, так что если участок имеет 100vh, контейнер должен также, если он имеет 50vh, он также должен иметь 50vh. Как мне это сделать? Я не могу центрировать что-то, используя flexbox, если высота - высота h1.

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.