बूटस्ट्रैप 4, कैसे एक कोले को 100% की ऊंचाई बनाने के लिए?

Question

मैं कॉलम को ब्राउजर डब्ल्यू बूटस्ट्रैप 4 की 100% ऊंचाई कैसे ले सकता हूं?

निम्नलिखित देखें: https://codepen.io/johnpickly/pen/dRqxjV

नोट पीला div, मैं इस div/स्तंभ की जरूरत है 100% की ऊंचाई को लेने के लिए ... सभी माता पिता div के लिए है बनाने के लिए बिना ऐसा करने के लिए रास्ता नहीं है 100% की ऊंचाई?

धन्यवाद

एचटीएमएल:

<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% ऊंचाई ... हैं

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> 

सीएसएस: बच्चों 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 तत्व में पूर्ण स्थिति का उपयोग करने की आवश्यकता है!

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