HTML/CSS:为什么身体不伸展到它的内容？
以这个简单的例子为例，打开它：
<html>
<body style="background-image:url(http://upload.wikimedia.org/wikipedia/commons/2/21/Mandel_zoom_00_mandelbrot_set.jpg);background-repeat: no-repeat; background-position: top center;">
<div style="width: 8000px; border: 3px solid red;">Demo</div>
</body>
</html>页面的制作使得主体有一个以顶部为中心的背景图片和一个溢出窗口边界的包含元素，因此有水平滚动(如果你有一个超过8000 if的监视器，那么你真的很酷，请使窗口变小并刷新)。
问题是，由于某种原因，<body>没有扩展到包含<div>。它只是保持与视图端口相同的宽度，并且<div>会溢出它。这反过来又会导致背景在错误的位置居中，并将其裁剪到视口的大小。当你向右滚动的时候很难看。
我已经找到了解决这个问题的方法，但是我想知道为什么是这样的呢？它似乎在浏览器之间也是一致的。但在我看来，这是完全违反直觉的，而且基本上是错误的。容器元素应该足够大，以包含它的子元素--当然，除非它们是绝对定位的，当然，在这种情况下，它们不参与布局计算。
回答 2
Stack Overflow用户
发布于 2010-01-29 11:11:54
区块根本不水平伸展来容纳它们的子内容，根本就没有。(1)这是只发生在垂直轴上的事情。(2)从逻辑上讲，两个维度都不能伸展，一个必须固定(wrt父级)。在CSS中，普通流中块元素的宽度仅从父元素(减去垫子、边距、边框)导出，然后从父元素开始，查看块的宽度中可以容纳多少内容并将其流动。
背景图像可能会出现在一个令人困惑的地方，因为CSS的这个怪人会误导您实际发生的事情：
对于根元素为HTML " HTML“元素或XHTML "html”元素的文档，该元素的“透明”值表示“背景-颜色”，“无”表示“背景-图像”，用户代理在为画布绘制背景时必须使用该元素的第一个HTML "BODY“元素或XHTML "body”元素的背景属性的计算值，并且不能为该子元素绘制背景。这些背景还必须锚定在同一点上，因为如果它们只是为根元素绘制的话。
这是一种令人讨厌的攻击，因为人们习惯于把背景放在“body”上，让它填充视图，尽管<body>元素本身并不代表视口。
(1)除少数特殊情况外，例如float和position: absolute元素，没有声明的width。
(2)除非你故意通过设置height/overflow来阻止这种情况。
Stack Overflow用户
发布于 2010-01-29 11:05:49
展开的例外是视口。任何东西都不会扩展视图，除非它的直接或附加内容需要它--这包括div和table元素(例如，body上的display: table-cell ) --但不是块容器。
https://stackoverflow.com/questions/2161405
复制相似问题
腾讯云开发者
