Question

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

<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>

页面是这样的，身体有一个顶部居中的背景图片和一个溢出窗口边界的包含元素，所以有水平滚动（如果你有一个超过8000px的显示器，那么你真的很酷，请制作窗口较小并刷新）。

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

我已经找到了解决这个问题的方法，但我想知道为什么这是怎么回事？它似乎在浏览器中也是一致的。但在我看来，这是非常反直觉的，基本上是错误的。容器元素应该足够大以容纳它的子元素 - 除非它们绝对定位，否则它们不参与布局计算。

Answer 1

块根本不会水平伸展以容纳他们的孩子内容;从来没有。（1）这种情况只发生在垂直轴上。（2）从逻辑上讲，两个尺寸都不会有弹性;一个必须修复（父母）。在CSS中，正常流程中块元素的宽度仅来自父级（减去填充，边距，边框），然后高度随之而来，看看你可以在块的宽度中放入多少内容并使其流动

背景图片可能会出现在一个令人困惑的地方，因为this quirk的CSS会误导您实际发生的事情：

对于其根元素为HTML“HTML”元素或XHTML“html”元素的文档，其计算值为'background'为'background-color'而'none'为'background-image'，用户代理必须而是在为画布绘制背景时使用该元素的第一个HTML“BODY”元素或XHTML“body”元素子元素的背景属性的计算值，并且不得为该子元素绘制背景。如果仅为根元素绘制它们，那么这些背景也必须固定在同一点上。

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

（1）除少数特殊情况外，例如float和position: absolute元素，但未声明width。

（2）除非您通过设置height / overflow故意停止此操作。

Answer 2

扩展的例外是视口。什么都不扩展视口，除非它的直接或附加内容需要它 - 这包括div和table元素（例如，身体上的display: table-cell） - 但不是块容器。

HTML / CSS：为什么身体不能伸展到它的内容？

2 个答案: