如何使列占据浏览器w引导程序4的100%高度?
请参阅以下内容:https://codepen.io/johnpickly/pen/dRqxjV
注意黄色div,我需要这个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>
答案 0 :(得分:40)
对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: How to make the row stretch remaining height?
答案 1 :(得分:9)
使用引导程序类 vh-100 对于exp:
<div class="vh-100">
答案 2 :(得分:3)
我已经尝试了Stack Overflow上提出的六种解决方案,而对我而言唯一起作用的是:
<div class="row" style="display: flex; flex-wrap: wrap">
<div class="col-md-6">
Column A
</div>
<div class="col-md-6">
Column B
</div>
</div>
我从https://codepen.io/ondrejsvestka/pen/gWPpPo那里得到了解决方案
请注意,这似乎会影响列边距。我不得不对它们进行调整。
答案 3 :(得分:1)
为子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;}
答案 4 :(得分: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>
答案 5 :(得分:0)
我这样解决了:
<section className="container-fluid">
<div className="row justify-content-center">
<article className="d-flex flex-column justify-content-center align-items-center vh-100">
<!-- content -->
</article>
</div>
</section>
答案 6 :(得分:-1)
我遇到了这个问题,因为我的cols超出了行网格长度(> 12)
使用100%Bootstrap 4的解决方案:
由于Bootstrap中的行已经display: flex
您只需要将flex-fill
添加到Col,并将h-100
添加到容器和任何子代。
笔在这里:https://codepen.io/joshkopecek/pen/Exjdgjo
<div class="container-fluid h-100">
<div class="row justify-content-center h-100">
<div class="col-4 hidden-md-down flex-fill" id="yellow">
XXXX
</div>
<div id="blue" class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8 h-100">
Form Goes Here
</div>
<div id="green" class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8 h-100">
Another form
</div>
</div>
</div>