引导 4 中的响应列高度

Question

我有一个问题，我几乎可以肯定它需要javascript，但对从哪里开始有点困惑，任何有任何有用的指示的人，我都渴望听到。

我有两列，左侧是复制内容，右侧是可缩放的图像。

我想：

右列图像高度 = 100vh 左列内容溢出-y = 滚动

除非

左列内容适合视口高度

然后

右列图像高度 = 左列内容高度

提前谢谢你。

Answer 1

我建议使用弹性框并将最大高度设置为 100vh。定义内容的溢出时，它将显示滚动条。

我使用背景颜色来可视化每个块使用的空间。

.wrapper {
display: flex;
width: 100%;
max-height: 100vh;
}
.content {
background-color: red;
overflow-y: scroll;
}
.image {
background-color: blue;
}

<div class="wrapper">
<div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div class="image"><img src="https://via.placeholder.com/100"></div>
</div>

每当未使用最大高度时，都会要求所需的空间。

.wrapper {
display: flex;
width: 100%;
max-height: 100vh;
}
.content {
background-color: red;
overflow-y: scroll;
}
.image {
background-color: blue;
}

<div class="wrapper">
<div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div class="image"><img src="https://via.placeholder.com/100"></div>
</div>