我有一个我正在尝试做的事情的简单原型(prototype)。 Chrome 可以使用，但它在 Firefox 或 IE11 中不起作用(还没有尝试过 Edge)。我正在使用“container-fluid”来获得全宽，“h-100” ' 获得全高，'overflow-y' 因为我希望我的左右部分能够根据需要垂直滚动。我看到的是左侧部分的内容溢出了该部分。我尝试添加“最小高度”per this answer ，但这并没有什么区别。
这是一个 Bootstrap 错误(这是 beta 2)，还是我需要设置一些额外的样式？
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<style>
.border {
border-width: 5px !important;
}
</style>
</head>
<body>
<div class="container-fluid h-100 border border-danger">
<div class="row">
<div class="col-3 h-100 border border-success"
style="overflow-y: auto;">
<div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat, turpis ac porttitor sodales, turpis magna facilisis quam, eget efficitur neque tortor sit amet risus. </p>
<span class="active">More...</span>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat, turpis ac porttitor sodales, turpis magna facilisis quam, eget efficitur neque tortor sit amet risus. </p>
<span class="active">More...</span>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat, turpis ac porttitor sodales, turpis magna facilisis quam, eget efficitur neque tortor sit amet risus. </p>
<span class="active">More...</span>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat, turpis ac porttitor sodales, turpis magna facilisis quam, eget efficitur neque tortor sit amet risus. </p>
<span class="active">More...</span>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat, turpis ac porttitor sodales, turpis magna facilisis quam, eget efficitur neque tortor sit amet risus. </p>
<span class="active">More...</span>
</div>
</div>
</div>
</div>
<div class="col h-100 border border-primary"
style="overflow-y: auto;">
Info...<br>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Wide_panorama_of_Aam_Talab_Lake%2C_Raichur.jpg/1280px-Wide_panorama_of_Aam_Talab_Lake%2C_Raichur.jpg">
</div>
</div>
</div>
</body>
</html>
最佳答案
在这里，您遇到了使用基于百分比的高度时最常见的错误之一。
使用百分比作为高度的元素将不起作用，除非该元素的父元素具有高度(或绝对位置)，并且如果父元素也使用百分比，则其父元素需要高度，依此类推，直到 html 元素达到时，它从视口(viewport)的高度获取其高度。
通过将 h100 添加到 .row 和此规则中，它将起作用
html, body {
height: 100%;
}
堆栈片段
html, body {
height: 100%;
}
.border {
border-width: 5px !important;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<div class="container-fluid h-100 border border-danger">
<div class="row h-100">
<div class="col-3 h-100 border border-success"
style="overflow-y: auto;">
<div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat, turpis ac porttitor sodales, turpis magna facilisis quam, eget efficitur neque tortor sit amet risus. </p>
<span class="active">More...</span>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat, turpis ac porttitor sodales, turpis magna facilisis quam, eget efficitur neque tortor sit amet risus. </p>
<span class="active">More...</span>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat, turpis ac porttitor sodales, turpis magna facilisis quam, eget efficitur neque tortor sit amet risus. </p>
<span class="active">More...</span>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat, turpis ac porttitor sodales, turpis magna facilisis quam, eget efficitur neque tortor sit amet risus. </p>
<span class="active">More...</span>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat, turpis ac porttitor sodales, turpis magna facilisis quam, eget efficitur neque tortor sit amet risus. </p>
<span class="active">More...</span>
</div>
</div>
</div>
</div>
<div class="col h-100 border border-primary"
style="overflow-y: auto;">
Info...<br>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Wide_panorama_of_Aam_Talab_Lake%2C_Raichur.jpg/1280px-Wide_panorama_of_Aam_Talab_Lake%2C_Raichur.jpg">
</div>
</div>
</div>关于twitter-bootstrap - Bootstrap 4，全高、全宽布局，chrome 可以，firefox/ie11 不行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47020675/