如何调整div高度

1. 在HTML中创建一个包含icon的div，并设置其样式为固定定位（position: fixed），底部对齐（bottom: 0），并居中对齐（left: 50%、transform: translateX(-50%)）。

<div id="resizeIcon"></div>

2. 使用CSS样式为icon添加适当的样式，以便于在界面中显示一个可以拖拽的icon。例如，可以设置宽高、背景、光标等样式。

#resizeIcon {
  width: 20px;
  height: 20px;
  background-color: #ccc;
  cursor: ns-resize;
}

3. 使用JavaScript监听icon的mousedown事件，并在事件回调函数中实现拖动逻。可以设置一个布尔变量 isDragging 来标识是否正在拖动一个变量 originalHeight 来保存原始div的高度，以及一个变量 startPositionY 来保存鼠标点击位置的Y坐标值。

const resizeIcon = document.getElementById('resizeIcon');
let isDragging = false;
let originalHeight = 0;
let startPositionY = 0;

resizeIcon.addEventListener('mousedown (event) => {
  isDragging = true;
  originalHeight = event.target.parentElement.offsetHeight;
  startPositionY = event.clientY;
});

window.addEventListener('mousemove', (event) => {
  if (isDragging) {
    const deltaY = event.clientY - startPositionY;
    const newHeight = originalHeight + deltaY;
    event.target.parentElement.style.height = newHeight + 'px';
  }
});

window.addEventListener('mouseup', () => {
  isDragging = false;
});

在这个示例中，我们首先获取了id为 resizeIcon 的div元素，并添加了mousedown事件的监听器。当mousedown事件触发时，我们将 isDragging 设置为true，保存原始div的高度到 originalHeight 变量，并保存鼠标点击位置的Y坐标到 startPositionY 变量。

接下来，在mousemove事件的监听器中，我们首先检查 isDragging 是否为true，如果是，表示正在拖动。我们通过计算当前鼠标位置和点击位置的差值 deltaY，并加上 originalHeight 得到新的div高度 newHeight。然后，我们将新的高度应用到div元素的样式上。

最后，当mouseup事件触发时，我们将 isDragging 设置为false，表示拖动结束。

通过以上步骤，你就可以在一个div的底部中央生成一个拖拉icon，并且实现通过拖拉这个icon来改变div的高度了。你可以根据实际需求进行样式和逻辑的调整。