如果(图像位置:固定),将div高度设置为与流体图像高度相同

时间:2016-01-26 22:32:14

标签: html css css3

我试图在顶部创建具有固定图像的响应行为,并希望实现以下内容捕捉到包含图像的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>

我希望实现的远期图表。 enter image description here

1 个答案:

答案 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)
})