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

Question

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

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

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

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

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

编辑：不确定这有多大帮助，但这是所有内容布局的屏幕截图：在此处输入图像描述

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

标签： cssresponsive-designcss-position

Answer 1

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

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

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

注意：

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

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

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