可视区域里,有顶部固定的区域,下边有两个盒子,通过鼠标拖动让两个盒子高度改变,不要改变body的高度,并且下边盒子可以切换隐藏和显示
代码是这样的
注意:需要引入jquery.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>拖动改变盒子高度</title>
</head>
<body style="overflow: hidden;">
<div style="font-size:30px;box-sizing: border-box;text-align: center;padding: 10px;">
<div style="border: 1px solid #ccc;background:#bbb;height: 50px;">头部固定区</div>
<div style="border: 1px solid #ccc;background:#eee;min-height: 100px;overflow-y:auto;" id="TopBox">
中间滚动区
<div>111</div><div>111</div>
<div>222</div><div>222</div>
<div>333</div><div>333</div>
<div>444</div><div>444</div>
<div>555</div><div>555</div>
<div>666</div><div>666</div>
<div>777</div><div>777</div