使用HTML/CSS/JS实现类VS Code的IDE可拖拽调整拆分窗格布局

核心修复项 #

• 全局高度适配：给html、body、外层容器设置height: 100%，撑满整个视口，避免高度塌陷
• 布局结构调整：上下垂直分割的父容器.h-splitter使用flex纵向布局，替代原来的默认流布局
• 样式错误修正：
  • 移除垂直分割区域#bottom的max-height: 100px !important限制，允许拖拽调整高度
  • 水平分割条#separator移除固定高度40rem，改为自适应高度
  • 垂直分割条#h-separator光标样式从col-resize改为row-resize，符合上下拖拽的交互预期
• 拖拽逻辑优化：移除分割条的left/top偏移设置，flex布局下直接调整相邻面板的宽高即可，避免错位
• 修复垂直拖拽逻辑中的变量使用错误，避免尺寸计算异常

完整可运行代码 #

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>Page Layout</title>
  <style>
    html, body, #container, .h-splitter {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    .h-splitter {
      display: flex;
      flex-direction: column;
    }
    .splitter {
      width: 100%;
      height: 100%;
      display: flex;
    }
    #separator {
      cursor: col-resize;
      background-color: #aaa;
      background-position: center;
      width: 5px;
      height: auto;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    #first {
      width: 20%;
      height: 100%;
      min-width: 150px;
      background: #f0f0f0;
      padding: 10px;
    }
    #second {
      width: 80%;
      height: 100%;
      min-width: 300px;
      background: #f8f8f8;
      padding: 10px;
    }
    #h-separator {
      cursor: row-resize;
      background-color: #aaa;
      width: 100%;
      height: 5px;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    #top {
      width: 100%;
      flex: 1;
      min-height: 200px;
    }
    #bottom {
      background-color: #e8e8e8;
      min-width: 10px;
      min-height: 100px;
      height: 30%;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div id="container">
    <nav class="navbar navbar-dark bg-dark">
      <a class="navbar-brand">Navbar</a>
      <form class="form-inline">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Custom</button>
      </form>
    </nav>
    <div class="h-splitter">
      <div id="top">
        <div class="splitter">
          <div id="first">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore labore, placeat consequatur culpa non nisi nam error eum? Reiciendis enim recusandae nostrum temporibus sit voluptatem distinctio dolore repudiandae nesciunt explicabo.</div>
          <div id="separator"></div>
          <div id="second">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa ex praesentium ducimus cum officiis tempora repudiandae dolorem, blanditiis ad doloribus nesciunt, laboriosam quos et rem facilis quibusdam quisquam voluptatum enim? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, saepe architecto, non, rerum iure est corrupti quod a consectetur nobis animi illo dolor quaerat deserunt odio incidunt tempora nulla sequi!</div>
        </div>
      </div>
      <div id="h-separator"></div>
      <div id="bottom">底部面板内容</div>
    </div>
  </div>
  <script>
    function dragElement(element, direction) {
      var md;
      const first  = document.getElementById("first");
      const second = document.getElementById("second");
      element.onmousedown = onMouseDown;
      function onMouseDown(e) {
        md = {
          e,
          firstWidth:  first.offsetWidth,
          secondWidth: second.offsetWidth
        };
        document.onmousemove = onMouseMove;
        document.onmouseup = () => {
          document.onmousemove = document.onmouseup = null;
        }
      }
      function onMouseMove(e) {
        var delta = {x: e.clientX - md.e.clientX};
        if (direction === "H" ) {
          delta.x = Math.min(Math.max(delta.x, -md.firstWidth), md.secondWidth);
          first.style.width = (md.firstWidth + delta.x) + "px";
          second.style.width = (md.secondWidth - delta.x) + "px";
        }
      }
    }
    dragElement( document.getElementById("separator"), "H");

    function dragVElement(element, direction) {
      var md;
      const first = document.getElementById("top");
      const second = document.getElementById("bottom");
      element.onmousedown = onMouseDown;
      function onMouseDown(e) {
        md = {
          e,
          firstHeight: first.offsetHeight,
          secondHeight: second.offsetHeight
        };
        document.onmousemove = onMouseMove;
        document.onmouseup = () => {
          document.onmousemove = document.onmouseup = null;
        }
      }
      function onMouseMove(e) {
        var delta = {y: e.clientY - md.e.clientY};
        if (direction === "V") {        
          delta.y = Math.min(Math.max(delta.y, -md.firstHeight), md.secondHeight);
          first.style.height = (md.firstHeight + delta.y) + "px";
          second.style.height = (md.secondHeight - delta.y) + "px";
        }
      }
    }
    dragVElement(document.getElementById("h-separator"), "V");
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Rihazz