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

借此简单的例子和打开：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像素，那么你真的很酷，请将窗口缩小并刷新）。

问题是由于某种原因，<body>不能拉伸以包含<div>。它只是保持与视口相同的宽度，并且<div>会溢出。这反过来导致背景居中在错误的地方并将其裁剪到视口的大小。当你向右滚动时很难看。

我已经找到了解决这个问题的方法，但是我想知道为什么这样呢？它在浏览器中似乎也是一致的。但在我看来，这是非常直观的，基本上很简单错误。容器元素应该足够大以容纳它的孩子 - 除非它们完全被定位，在这种情况下它们不参与布局计算。

来源

2010-01-29 Vilx-

嘿。回到这2年后，我正在寻找你说你找到的同样的解决方案。 Bobince的答案并没有帮助，非常多..（浮动唯一的选择？） – SoreThumb 2012-08-29 04:04:21

我仍然使用浮动。看看这里：http://www.drowtales.com – 2012-08-29 11:24:25

块根本不会水平伸展以容纳其子内容; （1）这是只发生在纵轴上的事情。（2）从逻辑上讲，两个维度都不能有弹性;必须修正（父母）。在CSS中，正常流程中的块元素的宽度仅从父元素（减去填充，边距，边框）派生，然后高度继续从中，看看您可以在块的宽度中填充多少内容并使其流动。

背景图像可以出现在误导你什么是真正发生的事情，因为this quirk CSS的一个令人困惑的地方：

对于文档根元素是一个HTML“HTML”元素或XHTML“HTML “元素为'background-color'计算'transparent'的值，'background-image'则计算'none'，但用户代理必须使用该元素的第一个HTML”BODY“元素或XHTML中的背景属性的计算值当为画布绘制背景时，“body”元素的子元素，并且不能绘制该子元素的背景。这些背景也必须与它们仅用于根元素时相同的点上。

这是一个讨厌的黑客到位，因为人们习惯上把“身体”的背景和有它填充视口，即使<body>元素本身并不代表口中。

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

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

来源

2010-01-29 11:11:54 bobince

我打算写完全相同的答案，但没有CSS规范的引用。 +1 – Boldewyn 2010-01-29 11:14:27

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

来源

2010-01-29 11:05:49 Anonymous

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

回答

相关问题