---
## ✅ 核心思路：找到最深子元素的底部坐标
对每个 `.designer-label` 元素，计算它**距离父容器顶部的偏移量（top）加上自身高度（包括边框、内边距、外边距）**，取其中的最大值，这就是安全的最小容器高度：
```ja vascript
function getMinContainerHeight(container) {
const labels = container.querySelectorAll('.designer-label');
let maxHeight = 0;
labels.forEach(label => {
const rect = label.getBoundingClientRect();
const containerRect = container.getBoundingClientRect();
// 计算 label 相对于 container 顶部的偏移（考虑滚动与嵌套）
const topOffset = rect.top - containerRect.top;
const totalHeight = topOffset + label.offsetHeight +
parseInt(getComputedStyle(label).marginBottom || '0') +
parseInt(getComputedStyle(label).marginTop || '0');
if (totalHeight > maxHeight) {
maxHeight = totalHeight;
}
});
return Math.max(80, maxHeight); // 设置保底值（如 80px），避免过小
}
```
> ⚠️ 注意：`getBoundingClientRect()` 返回的是相对于视口的坐标，因此需要减去容器自身的 `top` 才能获得相对偏移。也可以直接读取 `style.top`，但那只对内联样式且单位是 px 有效，健壮性不足。
---
## ✅ 纯 JavaScript 替代 jQuery UI Resizable
原有方案依赖 `jquery-ui/resizable`，现在我们用原生事件模拟“仅允许底部拖拽”的行为。首先，HTML 结构大致如下：
```html
Field1
Field2
``` 接着，通过 `ResizablePanel` 类进行控制： ```ja vascript class ResizablePanel { constructor(container) { this.container = container; this.minHeight = getMinContainerHeight(container); this.isResizing = false; this.startY = 0; this.startHeight = 0; this.init(); } init() { const handle = this.container.querySelector('.resize-handle'); if (!handle) return; handle.addEventListener('mousedown', (e) => { e.preventDefault(); this.isResizing = true; this.startY = e.clientY; this.startHeight = this.container.offsetHeight; document.addEventListener('mousemove', this.onMouseMove); document.addEventListener('mouseup', this.onMouseUp); }); } onMouseMove = (e) => { if (!this.isResizing) return; const delta = e.clientY - this.startY; const newHeight = Math.max(this.minHeight, this.startHeight + delta); this.container.style.height = `${newHeight}px`; }; onMouseUp = () => { this.isResizing = false; document.removeEventListener('mousemove', this.onMouseMove); document.removeEventListener('mouseup', this.onMouseUp); }; } // 初始化 document.querySelectorAll('.designer-panel-body').forEach(el => { new ResizablePanel(el); }); // 字段删除后更新 minHeight（示例：点击删除） document.addEventListener('click', (e) => { if (e.target.classList.contains('designer-label')) { e.target.remove(); // 重新初始化该容器的 ResizablePanel（或手动更新） const container = e.target.closest('.designer-panel-body'); if (container) { // 清除旧实例（若需复用，建议增强类支持 destroy 方法） // 此处简单重建 new ResizablePanel(container); } } }); ``` --- ## ✅ 关键注意事项 - **CSS 必须为容器设置 `position: relative`**，否则 `position: absolute` 的子元素 `top` 会相对于文档根节点计算，导致偏移不准确。 - `getMinContainerHeight()` 应在字段发生变化（添加/删除/移动）后**立即调用并更新 minHeight**，建议封装成响应式逻辑。 - 如果字段支持拖拽重排，需要监听 `dragend` 或自定义位置变更事件，触发 minHeight 重新计算。 - 原生实现比 jQuery UI 更轻量、更易控制，但需要自行处理边界判断、防抖、移动端兼容（如 `touchstart/move/end`）等细节。 - 生产环境中建议将 `ResizablePanel` 抽为独立模块，配合 `MutationObserver` 监听 `.designer-label` 变化，实现全自动同步。 通过以上方案，你可以完全摆脱 jQuery，在现代浏览器中稳健地实现“带智能最小高度约束的垂直可调容器”，兼顾灵活性与性能。
