div 忽略背景图片的高度

Question

我有一个问题，我的 div 没有像我认为的那样响应。我创建了一个 JSFiddle 以使其更易于理解。

现在是 html 标记：

<div class="img-hack">
    <img src="http://lorempixel.com/900/250/" class="img-top" />
    <div class="left-bg"></div>
    <div class="right-bg"></div>
</div>

这里是对应的css：

.img-hack {
    display:block;
    height:250px;
}
.img-top {
    margin: 0 auto;
    display: block;
    max-width: 100%;
    padding: 0;
}
.left-bg {
    background-image: url("http://lorempixel.com/20/250/");
    background-repeat: repeat-x;
    background-color: red;
    position: absolute;
    display:inline-block;
    height: 100%;
    width: 50%;
    top:0;
    left:0;
    z-index: -1;
}
.right-bg {
    background-image: url("http://dummyimage.com/20x250/8f388f/fff");
    background-repeat: repeat-x;
    background-color: blue;
    position: absolute;
    display:inline-block;
    height: 100%;
    width: 50%;
    max-height: 100%;
    top:0;
    right:0;
    z-index: -2;
}

据我了解，right-bg 和 left-bg 的父项是 img-hack。所以将高度设置为 100% 应该使它们大小相同。但是它不是。两个 div 都向下扩展到页面的末尾（参见 Fiddle：背景图像停止，但 div（蓝色和红色）向下扩展到最后)

有人有想法吗？

Answer 1

因为.left-bg/.right-bg元素是绝对定位的。因此，它们会从正常流程中移除，并且不会考虑其父项。

在您的情况下，您需要做的就是相对定位父元素 .img-hack。

在这样做时，绝对定位的子元素相对于父元素定位相对，因此它们占据它的高度。

Updated Example

.img-hack {
    display: block;
    height: 250px;
    position: relative;
}

Answer 2

absolute 把你的页面弄乱了：你想要这样的东西吗？

<div class="img-hack">
<div class="left-bg"></div>
<div class="right-bg"></div>
<div class="imagewrapper">
    <img src="http://lorempixel.com/900/250/" class="img-top" />
</div>
</div>

CSS:

.img-hack {
    display:block;
    height:250px;
    background-color: lime;
    box-sizing: border-box;
}
.imagewrapper {
    position:absolute;
    width:100%;
    text-align: center;
}
.img-top {
    margin: 0 auto;
    display: block;
}
.left-bg {
    background-image: url("http://lorempixel.com/20/250/");
    background-repeat: repeat-x;
    background-color: red;
    height: 100%;
    width: 50%;
    float:left;
}
.right-bg {
    background-image: url("http://dummyimage.com/20x250/8f388f/fff");
    background-repeat: repeat-x;
    background-color: blue;
    height: 100%;
    width: 50%;
    max-height: 100%;
    float:right;
}

div 忽略背景图片的高度

div ignoring height with background image

html

css

background