HTML/CSS：为什么正文没有延伸到其内容？答案

【问题标题】：HTML/CSS: Why is body not stretching to its contents?HTML/CSS：为什么正文没有延伸到其内容？
【发布时间】：2011-01-10 19:26:13
【问题描述】：

拿这个简单的例子打开它：

<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 像素，那么你真的很酷，请让窗口变小并刷新）。

问题在于，由于某种原因，<body> 没有延伸到包含<div>。它只是与视口保持相同的宽度，<div> 会溢出它。这反过来会导致背景在错误的位置居中并将其裁剪为视口的大小。向右滚动时非常难看。

我已经找到了解决这个问题的方法，但我想知道为什么会这样？它似乎在浏览器之间也是一致的。但在我看来，这是非常违反直觉的，基本上是错误。容器元素应该足够大以包含它的子元素 - 除非它们是绝对定位的，当然在这种情况下它们不参与布局计算。

【问题讨论】：

嘿。 2年后回到这个，我正在寻找你说你找到的相同解决方案。 Bobince 的回答无济于事，非常......（浮动是唯一的选择吗？）
我还在使用浮点数。在这里查看：drowtales.com

标签： html css layout background overflow

【解决方案1】：

扩展的例外是视口。除非直接或附加内容需要，否则不会扩展视口——这包括 div 和 table 元素（例如，display: table-cell on body）——但不是块容器。

【讨论】：

【解决方案2】：

块根本不会水平拉伸以适应其子内容；从来没有。(1) 这只是在垂直轴上发生的事情。(2) 从逻辑上讲，两个维度都不能有弹性；一个必须修复（wrt parent）。在 CSS 中，正常流动中块元素的宽度仅来自父元素（减去填充、边距、边框），然后高度随之而来，看看你可以在块的宽度中容纳多少内容并使其流动.

由于 CSS 的this quirk，背景图像可能会出现在一个令人困惑的地方，从而误导您了解实际发生的情况：

对于根元素是 HTML“HTML”元素或 XHTML“html”元素的文档，其“背景颜色”的计算值为“透明”，“背景图像”的计算值为“无”，用户代理必须而是在为画布绘制背景时使用该元素的第一个 HTML“BODY”元素或 XHTML“body”元素子元素的背景属性的计算值，并且不得为该子元素绘制背景。这样的背景也必须锚定在同一点，就像它们只为根元素绘制时一样。

这是一个令人讨厌的 hack，因为人们习惯于在“body”上放置背景并让它填充视口，即使 <body> 元素本身并不代表视口。

(1) 少数特殊情况除外，例如没有声明 width 的 float 和 position: absolute 元素。

(2) 除非您故意通过设置 height/overflow 来阻止它。

【讨论】：

我打算写完全相同的答案，但没有引用 CSS 规范。 +1