我想实现一个效果，给div 2慢慢增加高度，然后将上面div 1逐渐往上抬，也就是div 2加高时不是向下填充扩张，而是保持div 2底部边不动，向上扩张，这个怎么做求舅。
思路就是上面的盒子是要由下面的盒子决定位置，所以要用绝对定位，将上面盒子依据下面盒子定位，下面的盒子同样也要固定自己的定位，我这里是用fixed固定，你改成绝对定位也行，然后你试着修改box2的高度就会发现box1被抬高了，你看看是不是你想要的，希望采纳呀！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#box1 {
background-color: aqua;
width: 200px;
height: 200px;
position: absolute;
top: -200px;
left: 0;
}
#box2 {
background-color: red;
width: 200px;
height: 300px;
position: fixed;
bottom: 0;
left: 0;
}
</style>
<body>
<div id="box2">
<div id="box1"></div>
</div>
</body>
</html>
个人思路，仅供参考：
两个div先定义好高度与宽度，利用东安湖效果，同时改变两个div到页面顶部的距离，别忘了同时改变高度
那你外面的盒子得固定高度吧。如果div2过高就会出现滚动条
比如下面这个。当bottom为500时，就是往上顶。只要两个盒子高度大于答盒子时才会往上，其他都是往下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 400px;
height: 500px;
background: yellowgreen;
overflow-y: auto;
}
.top{
width: 400px;
height:100px;
background: red;
}
.bottom{
width: 400px;
height: 400px;
background: gold;
}
</style>
</head>
<body>
<div class="box">
<div class="top">1</div>
<div class="bottom">2</div>
</div>
</body>
<script>
</script>
</html>
大概是长高的动画效果是吧，可以参考一下
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#div1{
position: absolute;
background-color: #000;
transition: 5s; /*使用五秒*/
height: 20%;
width: 100%;
bottom: 0px;
}
#div2{
position: absolute;
background-color: #0f0;
transition: 5s; /*使用五秒*/
height: 80%;
width: 100%;
top: 0px;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<script type="text/javascript">
setTimeout(function() {
document.getElementById('div1').style.height = "95%";
document.getElementById('div2').style.height = "5%";},1000) //等待1000毫秒
</script>
</body>
</html>