【JS 实现：可拖动改变上下两个区域大小】

常安cc

已于 2023-05-29 17:26:44 修改

阅读量290

点赞数

分类专栏：前端 js 文章标签： javascript css html

于 2023-05-29 17:26:30 首次发布

本文链接：https://blog.youkuaiyun.com/m0_55546349/article/details/130932847

版权

本文介绍如何利用JavaScript实现一个功能，允许用户通过拖动来改变页面上两个区域之间的边界，从而调整各自区域的大小。详细步骤和代码示例可在链接中查看。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS 实现：可拖动改变上下两个区域大小

https://blog.youkuaiyun.com/qq_41646249/article/details/120994215

<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>ResizeBar 上下移动</title>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.js'></script>

    <style type='text/css'>
        body,
        html {
   
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        #main {
   
            background-color: BurlyWood;
            position: absolute;
            height: 40%;
            right: 0;
            left: 0;
            top: 60%;
            margin-top: 10px;
        }

        #sidebar {
   
            background-color: IndianRed;