html - parent 高度比 child 小，为什么？

Question

我试图在我网站的父容器中垂直拉伸(stretch)图像(不是整个主体)，它是 ID 为“imagen-fondo”的 div

我已经尝试过 backstretch 插件和带有背景大小的 css background-image 来做到这一点。

但这两种情况的问题是父容器的计算高度小于直接子容器的高度，因此背景图像看起来比内容本身小。

我怎样才能让它和他的直系 child 一样高或者至少更大一点？

你可以在这里看到现场演示:

http://50.21.181.12:3001/plantillas/mba

更新:

我认为问题是 div#imagen-fondo 正在获取窗口的高度而不是他的内容，这就是为什么当屏幕很大时，问题不会发生，但是当窗口比它发生的内容小，你可以用这两个截图检查它，就像你开始垂直滚动背景图像结束:

溢出的东西？

更新 2:

现在我引入了一些 javascript 来让它工作，

获取页脚偏移位置并将“.backstretch”div 的高度拉伸(stretch)到该高度。

但是，如果您调整窗口大小以使垂直滚动条出现并检查页面，您仍然可以看到父容器“#imagen-fondo”(backstretch 应该从那里自动获取他的高度)仍在获取可见视口(viewport)的高度，而不是内容本身。

如果有人找到更好的方法来做到这一点，CSS only 将使用该方法而不是这种肮脏的方法。

Answer 1

使用 clear: both 清除父 div 中的 float ； 或者在父 div 上使用 clearfix。