分隔条拖动区域

            
            <div class="container">
  <div class="top" id="topPanel"></div>
  <div class="divider" id="divider"></div>
  <div class="bottom" id="bottomPanel"></div>
</div>

<style>
.container {
  height: 100vh;
  position: relative;
  user-select: none;
}

.top {
  background: #f0f0f0;
  height: 50%;
  min-height: 20px;
}

.bottom {
  background: #e0e0e0;
  flex: 1;
  min-height: 20px;
}

.divider {
  height: 10px;
  background: #999;
  cursor: row-resize;
  position: relative;
  z-index: 1;
}

.divider:hover {
  background: #666;
}
</style>

<script>
const divider = document.getElementById('divider');
let startY = 0;
let topHeight = 0;

divider.addEventListener('mousedown', (e) => {
  startY = e.clientY;
  topHeight = document.getElementById('topPanel').offsetHeight;
  document.documentElement.style.cursor = 'row-resize';
  
  document.addEventListener('mousemove', doDrag);
  document.addEventListener('mouseup', stopDrag);
});

function doDrag(e) {
  const container = document.querySelector('.container');
  const newHeight = topHeight + (e.clientY - startY);
  const maxHeight = container.clientHeight - 20;
  
  document.getElementById('topPanel').style.height = 
    `${Math.max(20, Math.min(newHeight, maxHeight))}px`;
}

function stopDrag() {
  document.documentElement.style.cursor = 'auto';
  document.removeEventListener('mousemove', doDrag);
  document.removeEventListener('mouseup', stopDrag);
}

// 阻止文本选中
document.onselectstart = () => false;
</script>

        

            
            body {
  background-color: #fefefe;
  text-align: center;
}
i {
  color: #777;
}
svg {
  width: 48px;
  height: 48px;
}

        

            
            console.log(["Hello 笔.COOL 控制台"])