仅在页面尺寸太小时隐藏溢出

Question

我有一个div命名页面，让我们说1000px width和position: relative;，在这个页面div中我有一个带有position: absolute;和top:-20px; right: -20px的徽标。当页面宽度超过1000像素时，应显示图像，但当页面宽度等于或低于1000像素时，应隐藏溢出（overflow: hidden;）。

当我将页面div中的overflow属性设置为overflow: hidden;时，会裁剪徽标，当我选择visible时，当页面宽度等于或低于1000px时，我会得到一个水平滚动条。 / p>

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

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

谢谢！

Answer 1

您可以使用CSS Media查询（http://www.w3.org/TR/css3-mediaqueries/）根据屏幕大小更改布局。即：

@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及以下。

@media screen and（min-width：1200px）{ html {overflow-x：hidden;}

将其粘贴在样式表的末尾，或标题中的某些标签中进行测试。