我正在尝试创建一个使用 Bootstrap 4 响应的布局。我遇到的问题是当两个 div 垂直环绕较小的设备时，顶部 div 似乎将下部 div 向下推到超过父容器(请参阅下面的图片)。我希望较低的 div 适合容器，如何使用 Bootstrap 4 或最小 css 实现此目的？
我在第二个 div 的底部添加了一个黄色边框，以便我们可以看到推送。
html,
body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
.bottom-border {
border-bottom: 50px solid yellow;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid p-0 h-100">
<div class="row h-100">
<div class="col-md-8 bg-primary h-md-100 ">
<div class="d-md-none text-center bg-primary">
<h5>Left Section</h5>
</div>
<div class="d-none d-md-block m-3">
<h1>Left Section</h1>
</div>
</div>
<div class="col-md-4 h-100 text-center bg-danger bottom-border">
<h4>Right Section</h4>
</div>
</div>
</div>
</body>最佳答案
在您解释了边框高度的重要性之后，现在我明白您的意思了，如前所述，您的 h-100 类是问题所在。
该类告诉元素使用其父元素的 100% 高度，因为您将该类放在主 container 和 row 元素上，这两个正在使用全屏的高度，因为容器的父级是浏览器窗口，行父级是容器。
当您在子 div 上使用相同的类时，在本例中为红色 div，它也会尝试使用其父级(行)的完整高度，但它不会考虑内部的其他元素(蓝色 div)，如果您从红色 div 中删除 h-100 类，那么每个类都将使用一半的可用空间。
html,
body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
.bottom-border {
border-bottom: 50px solid yellow;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="container-fluid h-100">
<div class="row h-100 flex-column flex-md-row">
<div class="col-md-8 bg-primary">
<div class="d-md-none text-center bg-primary">
<h5>Left Section</h5>
</div>
<div class="d-none d-md-block m-3">
<h1>Left Section</h1>
</div>
</div>
<div class="col-md-4 flex-grow-1 text-center bg-danger bottom-border">
<h4>Right Section</h4>
</div>
</div>
</div>
</body>关于html - 使用 Bootstrap 4 垂直堆叠最后一个 DIV 以填充/适合容器的其余部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59866596/