我有一个元素涉及有一个漂浮在图像上的侧边栏。侧边栏设置为 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 中)必须始终可见。
最佳答案
我不确定这是否正是您要找的,但通常对于响应式布局,您会希望避免固定尺寸,例如以 x 像素数设置的特定宽度。
这显示了您的代码具有 .wrapper
和 .thumbs-inner
的响应式布局(请注意,我还没有解决这两个 div 中的任何内容问题,因为我已经不知道你想要的布局是什么):
https://codepen.io/anon/pen/ZqrZaj
注意:
我已将两个布局 div 切换为使用
box-sizing: border-box;
这将允许您使用像素作为边距和填充,但仍然使用百分比作为宽度。我已经从
<.wrapper
中删除了宽度并切换到基于百分比的绝对左右声明 - 如果您修改这些值,布局应该仍然有效。我添加了边框以使布局更加明显。
关于css - 在绝对定位的响应式外部容器中响应式地缩放内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52861212/