div定位后脱离文档流,则其高度不会影响父元素高度,但有时需要页面其他元素高度随着该定位元素高度变化而变化
原理:js动态获取定位高度,然后动态赋值给其他元素的margin-top(只要是能改变距离顶部高度的属性都可以,根据实际需要)。
如以下例子:
效果图:
html代码:
<div class="building-page-fixed">
这是定位元素的内容区域
代码已进行删减
</div>
<div class="building-page-margin ">
<!-- 这是需要改变距顶部距离的页面元素 -->
<div class="index-module ">
<ul class="rolling-load-parent">
<li class="rolling-load-item">
<a href="#" class="index-item-content">
<div class="index-item-media">
<img src="../img/project/yhzy_l.jpg">
</div>
<div class="index-item-inner">
<div class="index-item-title">房11111111</div>
<div class="index-item-subtitle">临高县博厚镇马裊乡</div>
<div class="index-item-label">
<span>高层</span> <u>别墅</u>
</div>
<div class="index-item-text">20,000元/㎡</div>
</div>
</a>
</li>
</ul>
</div>
</div>
js代码:
// 属性高度改变----代码有删减,只留下两句最重要的
function setMargin(){
var topHeight=$('.building-page-fixed').height();
$('.building-page-margin').css('margin-top',topHeight+'px');
}