如何使列占用浏览器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>
解决方法
使用Bootstrap 4 h-100类高度: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?