ブートストラップ4、コラムを作る方法は100％の高さですか？

Question

カラムをブラウザのブートストラップ4の100％の高さにするにはどうすればよいですか？

は、以下を参照してください。https://codepen.io/johnpickly/pen/dRqxjV

注黄色のdiv、私は100％の高さを取るために、このDIV /列を必要とする...のは、持っているすべての親のdivを作成することなく、これを実現する方法はあります100％の高さですか？

はありがとう

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

あなたはまた、任意のコンテナを確保する必要があります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

のために含まh-100クラスを使用し、100％の高さ...

です10

html,body { 
    height: 100%; 
} 

Answer 2

セットの表示：

<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：子供のdiv

htmlファイル用のテーブルセル：親divの表示用テーブル：

#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

これは良い解決策ではありませんが、問題を解決する可能性があります。 #yellow要素でposition absoluteを使用する必要があります。

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