我试图在顶部创建具有固定图像的响应行为,并希望实现以下内容捕捉到包含图像的div的底部,但是具有position:fixed的图像没有给div的高度,你能指出我有什么问题吗?如果还有其他方法可以实现这个目标吗?
.slider {
height: auto;
width: 100%;
}
.image {
width: 100%;
position: fixed;
z-index: -1;
top: 0;
}
.content {
height: 1100px;
background-color: black;
width: 100%;
z-index: 100;
margin-top: 350px;
position: relative;
}
<div class='slider'>
<img class='image' src='http://s2.postimg.org/vmnzo6e0p/top.jpg'>
</div>
<div class='content'>
</div>
答案 0 :(得分:1)
也许您正在使用JQuery寻找类似的东西:https://jsfiddle.net/9hmyr40w/
CSS:
body{
margin: 0px;
}
.slider {
height: auto;
width: 100%;
}
.image {
width: 100%;
position: fixed;
z-index: -1;
top: 0;
}
.content {
height: 1100px;
background-color: black;
width: 100%;
z-index: 100;
position: relative;
}
JQuery的:
$(window).on("load resize", function() {
var imageBottom = $(".image").height() - 15
$(".content").css("top",imageBottom)
})