html - 父母身高比孩子小，为什么？

Question

我正在尝试在我的网站的父容器（不是全身）中垂直拉伸图像，它是 id 为“imagen-fondo”的 div

我已经尝试过 backstretch 插件，也尝试过带有 background-size 的 css background-image 来做到这一点。

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

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

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

http://50.21.181.12:3001/plantillas/mba

屏幕截图显示了父 div 的高度

屏幕截图显示了子 div 的高度

更新：

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

第1步，滚动到顶部 step2、滚动一点显示背景结束

有溢出的东西？

更新 2：

现在我介绍了一些 javascript 来使它工作，

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

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

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

score 0 · Accepted Answer

0

使用 clear: both; 在父 div 中清除浮动；或者在父 div 上使用 clearfix。

于 2012-11-14T17:04:50.940 回答

score -1 · Accepted Answer

现在我介绍了一些 javascript 来使它工作，

读取页脚位置并将“.backstretch” div 的高度拉伸到该高度。

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

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

2 回答 2