大div不能触发浏览器滚动条吗？答案

【问题标题】：Can a large div not trigger browser scroll bars?大div不能触发浏览器滚动条吗？
【发布时间】：2016-05-07 03:16:05
【问题描述】：

我有一个大 div 来存放我的背景图片。通常，它会以离开屏幕的侧面为中心。因为它是背景，所以我不希望滚动条出现在浏览器上——这里有解决方案吗？

谢谢

编辑：让我根据答案澄清一下：

我有一个超出浏览器边界的大图像，但我需要将其分配给 div 背景或 img 而不是 body 背景，因为我正在使用 jquery 等操作它。

我知道是not possible for a div's background image to extend beyond its borders。
我也不能使用带有溢出的 img 或嵌套 div:hidden 因为这会隐藏溢出，而我只想让它不触发滚动，即被布局引擎物理忽略但仍以视觉方式显示，就像溢出的身体背景一样。

【问题讨论】：

那么，自动高度呢？你能举个例子吗？
可能值得解释一下为什么你不能使用通常的解决方案（在 CSS 中只使用背景图片）（我假设有一个很好的理由 :)
有什么理由不能通过 CSS 将图像设置为背景而不是破解 div (background-image: url('filename.ext');)？

标签： html

【解决方案1】：

我刚刚遇到了和你一样的情况。

经过一点实验，我发现这是由于 CSS 属性 'position' 的值错误造成的。

当我将 div 的位置设置从“固定”更改为“绝对”时，一切都如你所愿。

【讨论】：

【解决方案2】：

这对我有用；我记得得知它在 Opera 中不起作用，但那是很久以前的事了。

html, body { overflow-x: hidden; }

【讨论】：

【解决方案3】：

根据我想出的这个例子的附加信息。该图像是填充整个可见区域的 div 的背景，其行为几乎就像它是身体的背景图像（在 Firefox 中测试）。您甚至可以通过修改background-position 属性来滚动图像。

<html>
<head>
<style>
#test {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: url('http://farm5.static.flickr.com/4121/4805074237_6cf5880f75_o.jpg');
    background-position: 50% 50%;
    overflow: none;
    z-index: -1;
}
</style>
</head>
<body>
<div id="test">
</div>

Here's some other stuff in the body of the page.

<div>
and some stuff in a div in the body of the page.
</div>

</body>
</html>

【讨论】：