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都在向下扩展到页面的最末端（参见小提琴：bg图像正在停止但是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忽略高度与背景图像

2 个答案: