我怎样才能使一列占据浏览器w bootstrap 4的100%高度?
请参见以下内容:https://codepen.io/johnpickly/pen/dRqxjV
注意黄色的div,我需要这个div/column占据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>
7条答案
按热度按时间t9aqgxwy1#
对
height:100%;
使用Bootstrap 4h-100
类https://www.codeply.com/go/zxd6oN1yWp
您还需要确保任何父(S)也是100%的高度(或有一个定义的高度)...
注意:100%高度与“剩余”高度不同。
**相关:**Bootstrap 4:如何使排拉伸剩余高度?
6tr1vspr2#
使用引导类vh-100
对于exp:
b1zrtrql3#
我已经尝试了Stack Overflow上建议的六种解决方案,唯一对我有效的是:
我从https://codepen.io/ondrejsvestka/pen/gWPpPo得到了解决方案
请注意,它似乎影响了列边距。我不得不对那些应用调整。
9w11ddsr4#
使用100% Bootstrap 4的解决方案:
因为Bootstrap中的行已经是
display: flex
您只需要将
flex-fill
添加到Col,并将h-100
添加到容器和任何子容器。标签:https://codepen.io/joshkopecek/pen/Exjdgjo
wgx48brx5#
我是这样解决的:
uqjltbpv6#
父div设置
display: table
,子div设置display: table-cell
HTML:
CSS:
aoyhnmkz7#
参见文档booot Bootstrap 大小调整#相对于父级