仅当页面大小太小时隐藏溢出

Question

我有一个名为 page 的 div，可以说 1000px width 和 position:relative; 在这个 page div 中，我有一个带有 position:absolute;< 的徽标/code> 和 top:-20px;右：-20px。当页面宽度大于 1000px 时，应显示图像，但当页面宽度等于或小于 1000px 时，应隐藏溢出（overflow: hide;）。

当我将页面 div 中的溢出属性设置为 overflow: hide; 时，徽标会被裁剪，当我选择 visible 时，当页面宽度相等时，我会看到一个水平滚动条或低于 1000 像素。

我解决这个问题的想法是使用 JavaScript 并根据页面宽度设置 overflow 属性。我更喜欢 CSS 解决方案，但找不到。 :-/

有人建议如何使用 CSS 解决这个问题吗？

谢谢！

Answer 1

您可以使用 CSS 媒体查询 (http://www.w3.org/TR/css3-mediaqueries/) 根据屏幕尺寸更改布局。 IE：

@media screen and (max-width: 1000px) { 
#page { overflow: hidden; } 
}

#page { overflow: visible; }

Answer 2

解决方案非常简单...

只需在页面周围制作一个包装 div 即可。假设页面 div 的宽度为 1000px，包装器 div 的宽度为 width: 100%。然后，这是为包装器 div 设置 overflow:hidden 的最简单方法，当页面大小缩小到例如 1020px 时，会裁剪一部分图像，当大小进一步缩小到 1000px 时，会出现水平滚动条因为页面 div（具有默认的 overflow:visible）。

就是这样...适用于（几乎）所有 5 年历史的浏览器。

Answer 3

您应该使用 CSS（针对浏览器布局问题而不是 Javascript）来执行此操作 - 并使用 @media 查询。

像这样，你想要水平滚动出现的地方是1200px及以下。

@媒体屏幕和（最小宽度：1200px）{
html {overflow-x: hide;}

将其粘贴在样式表的末尾，或者标头中的某些标记中以进行测试。