弹性盒填充未知高度的空间与引导 4.

Question

我正在使用 Bootstrap 4，需要在 3 个不同的框中进行框架。框架将有 2 列。左列一个框，第二列两个框。第一列中的框是确定框架高度的响应式图像。高度将未知。

第二列中的顶部框也将具有响应性，并优先选择列中的高度。第三个框(右下角(将包含可以滚动的内容，但它应填充第二列中的剩余高度。

查看所需结果的图片。

到目前为止，我只能通过设置高度来做到这一点。而且，我不想那样做。有什么想法吗？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container pt-3">
	<div class="row">
		<div class="col-sm-12">
			<div class="bg-white p-3">
				<div class="row">
					
					<div class="col-sm-8 pr-sm-1 pb-sm-2">
						<img src="http://via.placeholder.com/1920x1080" class="img-fluid">
					</div>
					
					<div class="col-sm-4 pl-sm-1">
						<div class="mb-2">
							<img src="http://via.placeholder.com/1920x1080" class="img-fluid">
						</div>
						<div class="bg-secondary">
							<ul class="list-group">
								<li class="list-group-item">Cras justo odio</li>
								<li class="list-group-item">Dapibus ac facilisis in</li>
								<li class="list-group-item">Morbi leo risus</li>
								<li class="list-group-item">Porta ac consectetur ac</li>
								<li class="list-group-item">Vestibulum at eros</li>
								<li class="list-group-item">Cras justo odio</li>
								<li class="list-group-item">Dapibus ac facilisis in</li>
								<li class="list-group-item">Morbi leo risus</li>
								<li class="list-group-item">Porta ac consectetur ac</li>
								<li class="list-group-item">Vestibulum at eros</li>
							</ul>
						</div>
					</div>
										
				</div>
			</div>
		</div>
	</div>
</div>

Answer 1

我希望看到其他人提出另一个答案，但简短的回答是，不，你不能。如果没有真正知道左图所占据的高度，就无法获得所需的效果。

但是，如果你做出几个假设，你可以安全地预测它：

• 假设 1：您使用的图像具有相同的纵横比，例如 16/9(与您在示例中使用的图像一样(
• 假设 2：您的 3 盒结构始终位于.container内(如您的示例(

由于 Bootstrap 对不同断点.container类使用固定大小，因此您可以安全地为第三个框的高度提供一个值，例如：

.list-group {
overflow-y: scroll;
}
@media (min-width: 768px) {
.list-group {
height: 120px;
}
}
@media (min-width: 992px) {
.list-group {
height: 165px;
}
}
@media (min-width: 1200px) {
.list-group {
height: 200px;
}
}

您可以在此处查看结果。我已经使用Bootstrap的Flex实用程序来定位盒子。您必须完成剩余的断点。