html - 单击页面并向右拖动时显示水平溢出隐藏项

Question

我在页面内容的两边显示 2 个图形。当浏览器/页面宽度变窄时，这些元素将从屏幕上裁剪掉，以便为内容留出更多空间。这主要是

.page {
    height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    min-width: 960px;
}

一切正常，但我有一个 min-width设置在 .page 上div 环绕着所有的内容并且是开场之后的下一个元素 body标签。我刚刚意识到，当浏览器宽度低于 min-width 时垂直滚动条从页面的一侧消失。

这是问题的 CodePen:https://codepen.io/moy/pen/oemBEN

大概是因为 body现在在 View 中，但是 .page元素保持在它的设置 min-width ...有道理。

不过，我之所以设置溢出就在.page上元素首先是因为我在 body 上设置它时遇到的问题.我认为我已经通过这种方式应用代码解决了一个问题。

如果我将以下代码移动到 body :

overflow-x: hidden;
overflow-y: auto;

一切似乎都如我所愿。当内容在 Mac 上的 Chrome + FireFox 中足够长时，内容区域任一侧的元素将被裁剪并且垂直滚动条保持在 View 中。如果我在 Safari (Mac) 或 Windows 上的 IE 中检查页面，则副项未正确裁剪。

如果您缩小浏览器然后单击背景并向右拖动，您可以显示页面的裁剪区域，它看起来很乱!

有解决办法吗？或者我需要凑合着隐藏垂直滚动条吗？

Answer 1

你可以为此使用 flex 布局:

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

• .container 元素启动 flex 布局。
• .img 元素设置了 width 和 flex-basis 并且不允许增长但可以收缩，导致一个“最大宽度”。
• .wrap 元素设置了 width 和 flex-basis 并且不允许收缩但可以增长，导致一个“最小宽度”。

如果页面变大，.img 元素会保持最大大小，但内容会占用所有可用空间。

如果页面变小，内容将保持其最小宽度并且图像元素开始消失。

此解决方案对于旧浏览器可能不安全，但对于现代浏览器来说是最简单的解决方案之一 Browser compatibility .