Bootstrap 4, cách tạo một col có chiều cao là 100%?

Question

Tôi làm cách nào để tạo một cột chiếm 100% chiều cao của trình duyệt w bootstrap 4?

Xem sau: https://codepen.io/johnpickly/pen/dRqxjV

Note div vàng, tôi cần div này/cột để đưa lên độ cao 100% ... Có cách nào để thực hiện điều này mà không cần phải làm cho tất cả div cha mẹ có chiều cao 100%?

Cảm ơn bạn

html:

<div class="container-fluid"> 
    <div class="row justify-content-center"> 

    <div class="col-4 hidden-md-down" id="yellow"> 
     XXXX 
    </div> 

    <div class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8"> 
     Form Goes Here 
    </div> 
    </div> 
</div> 

Answer 1

Sử dụng bao gồm h-100 lớp cho height:100%;

<div class="container-fluid h-100"> 
    <div class="row justify-content-center h-100"> 
    <div class="col-4 hidden-md-down" id="yellow"> 
     XXXX 
    </div> 
    <div class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8"> 
     Form Goes Here 
    </div> 
    </div> 
</div> 

https://www.codeply.com/go/zxd6oN1yWp

Bạn cũng sẽ cần phải đảm bảo bất kỳ container là 100% chiều cao ...

html,body { 
    height: 100%; 
} 

Answer 2

Set display: table cho div phụ huynh và display: table-cell cho trẻ em div

tập tin html:

<div class="container-fluid"> 
    <div class="row justify-content-center display-as-table"> 

    <div class="col-4 hidden-md-down" id="yellow"> 
     XXXX<br /> 
     XXXX<br /> 
     XXXX<br /> 
     XXXX<br /> 
     XXXX<br /> 
     XXXX<br />vv 
     XXXX<br /> 
    </div> 

    <div class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8" id="red"> 
     Form Goes Here 
    </div> 
    </div> 
</div> 

CSS :

#yellow { 
    height: 100%; 
    background: yellow; 
    width: 50%; 
} 
#red {background: red} 

.container-fluid {bacgkround: #ccc} 

/* this is the part make equal height */ 
.display-as-table {display: table; width: 100%;} 
.display-as-table > div {display: table-cell; float: none;} 

Answer 3

Mặc dù nó không phải là một giải pháp tốt nhưng có thể giải quyết vấn đề của bạn. Bạn cần sử dụng vị trí tuyệt đối trong phần tử #yellow!

#yellow {height: 100%; background: yellow; position: absolute; top: 0px; left: 0px;} 
 
.container-fluid {position: static !important;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<div class="container-fluid"> 
 
    <div class="row justify-content-center"> 
 

 
    <div class="col-4" id="yellow"> 
 
     XXXX 
 
    </div> 
 

 
    <div class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8"> 
 
     Form Goes Here 
 
    </div> 
 
    </div> 
 
</div> 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>