怎么把一个div放在一个高度不定的position设置为absolute的div的下面

如题所述

<html>
<head>
<title>test</title>
<script type="text/javascript" src="http://127.0.0.2/js/jquery-1.5.2.min.js"></script>
</head>
<body>
<style>

#box{width:1000px;height:500px;background:#ccc;position:relative;}
#abs{width:1000px;height:auto;background:#f00;position:absolute;top:50px;}
#bo{width:1000px;height:100px;background:#0f0;position:absolute;}
</style>
<div id="box">
<div id="abs">这个高度不确定,是自动的<p>哈哈哈哈</p><p>哈哈哈哈</p><p>哈哈哈哈</p><p>哈哈哈哈</p></div>
<div id="bo" style="display:none;">这是你想放在下面的div</div>
</div>
<script type="text/javascript">
$(function(){
var divTop = $("#abs").css("top");
var divHeight = $("#abs").outerHeight(true);
$("#bo").ready(function(){
  $("#bo").css("top",divTop);
  $("#bo").css("margin-top",divHeight);
  $("#bo").css("display","block");
})
});
</script>
</body>
</html>

大概是先把你要显示在下面的div,用display:none不显示,然后读取你不确定高度的div的高度,以及它的top值,分别付给你要放下面的div的top以及margin-top,然后显示出来。。


当然还有更便捷的方法,就是把top和高度加起来,再付给显示在下面的,,,,


这只是一个例子,,,你自己优化一下,,



记得,自己引用jquery文件。

追问

谢谢啊

我本来是想着用CSS能不能解决

追答

你能确定高度就能用css来解决呗。。。

温馨提示:内容为网友见解,仅供参考
第1个回答  2014-10-25
直接写进去即可,尺寸变化可以用js实现追问

那样js没加载完毕是页面会不会显得很乱呢

追答

绝对的div可以先设置display为none,先不显示,js设置好尺寸后再设置display为可见

第2个回答  2014-10-25
position relative
第3个回答  2014-10-25
那个div也设置成absolute追问

问题是上一个div高度不确定

第4个回答  2014-10-25
不是可以直接写进去吗?
贴代码吧!
相似回答