我有一个项目，其中包含一个浮动在图像上方的侧边栏。边栏设置为position: absolute，以将其保留在图像上，并在屏幕尺寸变化时帮助其随其缩放。
这是一个基本上重新创建我正在处理的代码的Codepen：https://codepen.io/gojiHime/pen/JmYqaz
我遇到的问题是控制wrapper容器中内容的大小。我希望preview div与wrapper容器一起缩放。当前，它无法按预期方式工作，因为preview和wrapper的宽度和高度改变时thumbs-inner div不会开始缩放。 thumbs-inner div在大多数情况下都可以正确缩放，但是div的底部被切除，因此在较小的屏幕中看不到滚动条的底部。
我知道我在overflow: hidden上设置了wrapper，但是如果没有设置，preview中的内容将随着wrapper的高度变化而超出其范围。
因此，我正在寻找有关解决上述问题的想法。 wrapper必须保持绝对位置，并且thumbs-inner div需要具有垂直滚动功能，因此我无法对其进行任何操作。我认为为wrapper设置高度没有意义，因为它需要在高度和宽度上做出相应的缩放。
编辑：不确定这将有多大帮助，但这是所有内容的布局的屏幕截图：enter image description here
更改屏幕尺寸时，必须始终可见Kraftmaid徽标，全尺寸缩略图及其下方的文本（在代笔的.preview div中）。
答案 0 :(得分：0)
我不确定这是否正是您要寻找的东西，但是对于自适应布局，通常希望避免使用固定尺寸，例如以x像素数设置的特定宽度。
这显示您的代码具有.wrapper和.thumbs-inner的响应式布局（请注意，由于我不知道您打算使用的布局是什么，因此我没有解决这两个div中的任何内容问题）：< / p>
https://codepen.io/anon/pen/ZqrZaj
请注意：
我已将两个布局div切换为使用box-sizing: border-box;，这将允许您将像素用于边距和填充，但仍将百分比用于宽度。
我已经从.wrapper中删除了宽度，并切换为基于百分比的绝对左和右声明-如果您修改这些值，则布局仍然可以使用。
我添加了边框以使布局更明显。
