在绝对定位的响应式外部容器中响应式缩放内容

Question

我有一个项目，其中涉及在图像上浮动的侧边栏。侧边栏设置为 position: absolute 以使其保持在图像上方，并在屏幕尺寸发生变化时帮助其随图像一起缩放。

这是一个代码笔，它基本上重新创建了我正在处理的内容：https://codepen.io/gojiHime/pen/JmYqaz

我遇到的问题是控制wrapper 容器中内容的大小。我希望preview div 与wrapper 容器一起扩展。目前，它无法按预期工作，因为preview div 不会随着wrapper 和thumbs-inner 的宽度和高度变化而开始缩放。 thumbs-inner div 在大多数情况下可以正确缩放，但 div 的底部被截断，因此您无法在较小的屏幕中看到滚动条的底部。

我知道我在wrapper 上设置了overflow: hidden，但没有它，preview 中的内容会随着wrapper 的高度变化而延伸到它之外。

所以，我正在寻找有关如何解决上述问题的想法。 wrapper 必须保持绝对定位，thumbs-inner div 需要具有垂直滚动功能，所以我不能用这些做任何事情。我认为设置高度对wrapper 没有意义，因为它需要在高度和宽度上做出响应式缩放。

编辑：不确定这有多大帮助，但这是所有内容布局的屏幕截图：enter image description here

更改屏幕尺寸时，Kraftmaid 徽标、全尺寸缩略图及其下方的文本（位于代码笔中的 .preview div 中）必须始终可见。

Answer 1

我不确定这是否正是您要寻找的，但通常对于响应式布局，您希望避免固定尺寸，例如以 x 像素数设置的特定宽度。

这显示了您的代码以及 .wrapper 和 .thumbs-inner 的响应式布局（请注意，我没有解决这两个 div 中的任何内容问题，因为我不知道您的预期布局是什么）：

https://codepen.io/anon/pen/ZqrZaj

注意：

• 我已将两个布局 div 切换为使用 box-sizing: border-box;，这将允许您使用像素作为边距和填充，但仍使用百分比作为宽度。

• 我已从 .wrapper 中删除宽度并切换到基于百分比的绝对左右声明 - 如果您修改这些值，布局应该仍然有效。

• 我添加了边框以使布局更加明显。