CSS Bootstrap 4，如何使 col 的高度为 100%？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44982624/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4, how to make a col have a height of 100%?
提问by AnnaSm
how can I make a column take up 100% height of the browser w bootstrap 4?
如何使列占据浏览器 w bootstrap 4 的 100% 高度？
See the following: https://codepen.io/johnpickly/pen/dRqxjV
请参阅以下内容：https: //codepen.io/johnpickly/pen/dRqxjV
Note the yellow div, I need this div/column to take up a height of 100%... Is there way to make this happen without having to make all parent div's have a height of 100%?
注意黄色 div，我需要这个 div/column 占据 100% 的高度......有没有办法在不必使所有父 div 的高度为 100% 的情况下实现这一点？
Thank you
谢谢
html:
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>
回答by Zim
Use the Bootstrap 4 h-100class for height:100%;
使用 Bootstrap 4h-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
https://www.codeply.com/go/zxd6oN1yWp
You'll also need ensure any parent(s) are also 100% height (or have a defined height)...
您还需要确保任何父母也是 100% 的高度（或具有定义的高度）...
html,body {
height: 100%;
}
Note: 100% height is not the same as "remaining" height.
注意：100% 高度与“剩余”高度不同。
Related:Bootstrap 4: How to make the row stretch remaining height?
回答by Derrick Miller
I have tried over a half-dozen solutions suggested on Stack Overflow, and the only thing that worked for me was this:
我已经尝试了 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>
I got the solution from https://codepen.io/ondrejsvestka/pen/gWPpPo
我从https://codepen.io/ondrejsvestka/pen/gWPpPo得到了解决方案
Note that it seems to affect the column margins. I had to apply adjustments to those.
请注意，它似乎会影响列边距。我不得不对这些进行调整。
回答by Lawrence Eagles
I solved this like this:
我是这样解决的：
<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>
回答by Alan Yong
Set display: tablefor parent divand display: table-cellfor children divs
设置display: table为父DIV和display: table-cell对儿童的div
HTML :
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:
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;}
回答by Rohit Sharma
Although it is not a good solution but may solve your problem. You need to use position absolute in #yellowelement!
虽然这不是一个好的解决方案，但可以解决您的问题。您需要在#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-rwtheitroadesjU2yc3z8GV/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>回答by Josh Kopecek
I came across this problem because my cols exceeded the row grid length (> 12)
我遇到了这个问题，因为我的列超过了行网格长度（> 12）
A solution using 100% Bootstrap 4:
使用 100% Bootstrap 4 的解决方案：
Since the rows in Bootstrap are already display: flex
由于 Bootstrap 中的行已经 display: flex
You just need to add flex-fillto the Col, and h-100to the container and any children.
您只需要添加flex-fill到 Col、h-100容器和任何子项。
Pen here: https://codepen.io/joshkopecek/pen/Exjdgjo
笔在这里：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>
