Bootstrap 4，如何让col有100％的高度？

如何让列占用浏览器w bootstrap 4的100％高度？Bootstrap 4，如何让col有100％的高度？

请参阅以下内容：https://codepen.io/johnpickly/pen/dRqxjV

注黄格，我需要这个DIV /列占用100％的高度...有没有办法做到这一点，而不必让所有父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>

来源

2017-07-08 AnnaSm

我假设你已经指定了这个地方：'

'？ – ganders

使用附带的h-100类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

你还需要确保任何容器是100％的高度...

html,body { 
    height: 100%; 
}

来源

2017-07-08 10:51:08 ZimSystem

套装显示：表父DIV和显示：儿童DIV

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;}

来源

2017-07-08 05:06:48

虽然这不是一个好的解决方案，但可以解决您的问题。您需要在#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>

来源

2017-07-08 05:45:36

Bootstrap 4，如何让col有100％的高度？

回答

相关问题