Bootstrap 4 - container có chiều cao 100% của phần

Question

Vì vậy, ở đây tôi gặp sự cố với Bootstrap 4 (và cả flexbox). Đây là mã: 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> 

Và 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%; 
} 

Tôi muốn .container-chất lỏng luôn là 100% của nó là chiều cao phụ huynh, vì vậy nếu phần có 100vh, container nên Ngoài ra, nếu nó có 50vh nó cũng nên có 50vh. Làm thế nào để làm điều đó? Tôi không thể trung tâm một cái gì đó bằng cách sử dụng flexbox nếu chiều cao của nó là chiều cao của h1.

Answer 1

Nói chung, khi bạn muốn phần tử là chiều cao của phần tử gốc, hãy đặt cha mẹ thành vùng chứa linh hoạt.

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

Cài đặt ban đầu của hộp chứa flex là align-items: stretch. Điều này có nghĩa là trẻ em của một hộp chứa flex sẽ tự động mở rộng kích thước chéo của vùng chứa. Theo hướng hàng sẽ là chiều cao. Do đó, áp dụng display: flex hoặc display: inline-flex đến section#intro.