CSS 動態高度：避免固定高度導致內容重疊

問題

動態加載圖片的 div 設置固定 height，圖片載入後超出高度，覆蓋下方內容。

解決方案

方案一：移除固定高度（最簡單）

.container {
    /* height: 300px; 刪除這行 */
    overflow: hidden;   /* 包含浮動子元素 */
}

方案二：min-height 保證最小高度

.container {
    min-height: 200px;  /* 佔位，內容多自動撐開 */
}

方案三：Flex/Grid 佈局自適應

.wrapper {
    display: flex;
    flex-direction: column;
}
.image-box {
    flex: 1;  /* 自動填充剩餘空間 */
}

方案四：圖片載入後手動觸發重排（JS 兜底）

img.onload = () => {
    container.style.height = 'auto';  // 釋放固定高度
    // 或重新計算
    container.style.height = container.scrollHeight + 'px';
};

核心原則

不要為動態內容設置固定 height。使用 min-height、flex、grid、overflow: hidden (BFC) 讓容器隨內容自然增長。