Bootstrap 4, bir sütun nasıl% 100 yüksekliğe sahip olunur?

Question

Bir sütunu tarayıcı w önyükleme 4'ün% 100 yüksekliğini nasıl alabilirim?

aşağıdaki bakınız: https://codepen.io/johnpickly/pen/dRqxjV

Not sarı div, ben% 100 yüksekliğe kadar sürebilir bu div/sütun gerek ... en olan tüm üst div yapmak zorunda kalmadan bunu gerçekleştirmek için bir yol var mı % 100 bir yükseklik?

teşekkür ederiz

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

Kullanımı Ayrıca herhangi bir kap sağlamak gerekir 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

dahil h-100 sınıf% 100 yüksekliği ... Hangi

html,body { 
    height: 100%; 
} 

Answer 2

Seti ekran:

<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: Çocuk div

html dosyası için masa hücreye: üst div ve ekran için masa :

#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

İyi bir çözüm olmasa da sorununuzu çözebilir. #yellow öğesinde konum mutlakını kullanmanız gerekir!

#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>