修复Flex容器中Div调整尺寸时的间隙问题并替换拖拽Handle

一、修复Navigation调整尺寸时的间隙问题 #

调整navigation元素尺寸时出现大间隙，核心原因是resize属性会让元素被手动拉伸，但Grid布局的行高会跟随拉伸后的尺寸保留，而实际内容不需要这么大的空间，从而产生空白间隙。修复方案：

• 给navigation元素添加overflow: hidden，避免内容溢出导致额外空间占用
• 移除默认的resize属性，改用自定义拖拽手柄控制尺寸调整
• 将Grid布局中对应行的高度设置为minmax(auto, max-content)，确保行高仅适配实际内容高度

二、替换默认拖拽按钮为自定义Handle #

默认角落拖拽按钮体验不佳，通过以下步骤实现自定义拖拽手柄：

1. 在navigation内部添加专属拖拽手柄元素
2. 用CSS设置手柄样式，使其显眼且易于操作
3. 编写JavaScript监听鼠标事件，实现拖拽时动态调整navigation尺寸

完整修复代码 #

HTML 代码

<div class="task-3-2 container">
  <div class="item header">header</div>
  <div class="item navigation">
    navigation
    <div class="resize-handle"></div>
  </div>
  <div class="item main">main</div>
  <div class="item sidebar">sidebar</div>
  <div class="item ads">ads</div>
  <div class="item footer">footer</div>
</div>

CSS 代码

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap");

/* SET UP */
body {
  font-family: "Helvetica Neue", sans-serif;
  color: #333;
  background-color: #f5f5f5;
  margin: 0 auto;
}

.item {
  padding: 10px;
  background-color: #fff;
  border: 2px solid #ccc;
  border-radius: 5px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}

/* Task 3.2 */
.task-3-2.container {
  display: grid;
  height: 100vh;
  gap: 5px;
  grid-template-rows: auto minmax(auto, max-content) 1fr auto auto auto;
  grid-template-areas: "header" "nav" "main" "sidebar" "ads" "footer";
}

.task-3-2 .header {
  grid-area: header;
  background-color: #333;
  color: #fff;
  padding: 10px;
}

.task-3-2 .navigation {
  grid-area: nav;
  background-color: #f5f5f5;
  overflow: hidden;
  position: relative;
  resize: none; /* 移除默认resize */
}

/* 自定义拖拽手柄样式 */
.resize-handle {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 6px;
  background-color: #666;
  border-radius: 3px;
  cursor: ns-resize;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.resize-handle:hover {
  opacity: 1;
}

.task-3-2 .ads {
  grid-area: ads;
  background-color: #eee;
  padding: 10px;
}

.task-3-2 .sidebar {
  grid-area: sidebar;
  background-color: #f5f5f5;
  resize: horizontal;
  overflow-x: hidden;
}

.task-3-2 .main {
  grid-area: main;
  background-color: #fff;
  padding: 10px;
}

.task-3-2 .footer {
  grid-area: footer;
  background-color: #333;
  color: #fff;
  padding: 10px;
}

@media (min-width: 720px) {
  .task-3-2.container {
    grid-template-areas: "header header header" "nav nav nav" "sidebar main main" "ads footer footer";
    grid-template-rows: auto minmax(auto, max-content) 1fr auto;
  }
}

@media (min-width: 1020px) {
  .task-3-2.container {
    grid-template-areas: "header header header header" "sidebar nav nav ads" "sidebar main main ads" "footer footer footer footer";
    grid-template-rows: auto minmax(auto, max-content) 1fr auto;
  }
}

JavaScript 代码

const navigation = document.querySelector('.navigation');
const resizeHandle = document.querySelector('.resize-handle');

let isResizing = false;
let startY;
let startHeight;

resizeHandle.addEventListener('mousedown', (e) => {
  isResizing = true;
  startY = e.clientY;
  startHeight = navigation.offsetHeight;
  
  document.addEventListener('mousemove', handleMouseMove);
  document.addEventListener('mouseup', handleMouseUp);
  
  e.preventDefault(); // 避免拖拽时选中文字
});

function handleMouseMove(e) {
  if (!isResizing) return;
  
  const deltaY = e.clientY - startY;
  const newHeight = startHeight + deltaY;
  
  // 设置最小高度，防止元素被拖得过小
  if (newHeight >= 40) {
    navigation.style.height = `${newHeight}px`;
  }
}

function handleMouseUp() {
  isResizing = false;
  document.removeEventListener('mousemove', handleMouseMove);
  document.removeEventListener('mouseup', handleMouseUp);
}

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