我有2列布局,其中第一列将是垂直导航,而右列将是内容.
我希望第一列至少为视口大小的100％,但如果主要内容大于视口,则需要增加它.
如何获得第一列(黄色)与第二列相同的高度？
html,body {
height: 100%;
}
#yellow {
height: 100%;
background: yellow;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-3 h-100" id="yellow">
XXXX
</div>
<div class="col-9 h-100">
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
</div>
</div>
</div>最佳答案
由于Bootstrap 4使用flexBox,所以列的高度相等,但是当内容比视口高时,您使用的h-100会限制高度.
原文链接：https://www.f2er.com/css/530696.html只需在黄色div上使用min-vh-100类.
<div class="container-fluid">
<div class="row">
<div class="col-3 min-vh-100" id="yellow">
XXXX
</div>
<div class="col-9">
Content goes here<br>
Content goes here<br>
Content goes here<br>
</div>
</div>
</div>
演示：https://www.codeply.com/go/K7T1fXEl5p
您不需要html,body或yellow div上的额外CSS作为高度.当内容较少时(视口高度较短),这也将起作用：https://www.codeply.com/go/xdkXsLWRJt
