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

发布网友发布时间：2022-04-21 17:33

共5个回答

热心网友时间：2022-04-21 19:02

<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文件。

热心网友时间：2022-04-21 20:20

直接写进去即可，尺寸变化可以用js实现追问那样js没加载完毕是页面会不会显得很乱呢

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

热心网友时间：2022-04-21 21:55

position relative

热心网友时间：2022-04-21 23:46

那个div也设置成absolute追问问题是上一个div高度不确定

热心网友时间：2022-04-22 01:54

不是可以直接写进去吗？
贴代码吧！