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

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 中的内容将延伸到它之外作为 的高度code>wrapper 改变了。

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

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

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

Answer 1

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

这显示了您的代码具有 .wrapper 和 .thumbs-inner 的响应式布局(请注意，我还没有解决这两个 div 中的任何内容问题，因为我已经不知道你想要的布局是什么):

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

注意:

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

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

  <

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