twitter-bootstrap - css3 Bootstrap 4,如何使一个col的高度为 100%?

  显示原文与译文双语对照的内容
96 2

如何使列占用 Bootstrap 4的100%高度?

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

注意 yellow div,我需要这个 div/列以占用 100%的高度。 是否使这种情况发生,而不必使所有父级都具有第 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>



时间: 原作者:

90 1

将 Bootstrap 4 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%;


}



注:100%高度与"剩余"高度不同。

相关:Bootstrap 4: 如何使行拉伸剩余高度?

原作者:
105 3

的父 div 设置 display: table,对于子 div,为 display: table-cell

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



97 0

虽然这不是一个好的解决方案,但可以解决你的问题。 你需要在 #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>
原作者:
...