CSS visibility:hidden 不釋放佔位空間導致滾動條不消失：改用 display:none 徹底隱藏

問題現象

JSP 頁面中使用 include 引入片段，動態切換顯示/隱藏時，設置 visibility: hidden 元素雖然不見了，但**仍佔據佈局空間**，導致滾動條不消失、下方內容不上移。

核心區別

解決方案

方案一：display: none（推薦，徹底移除）

<div id="target" style="display: none;">內容</div>

<script>
// 顯示
document.getElementById('target').style.display = 'block'; // 或 flex/grid/inline 等

// 隱藏
document.getElementById('target').style.display = 'none';
</script>

方案二：CSS 類切換（更優雅）

<style>
.hidden { display: none !important; }
</style>

<div id="target" class="hidden">內容</div>

<script>
// 切換
const el = document.getElementById('target');
el.classList.toggle('hidden'); // 或 el.classList.add/remove
</script>

方案三：JSP/JSTL 控制輸出（服務端渲染）

<c:if test="${showContent}">
    <div id="target">內容</div>
</c:if>

為什麼 include 會加劇問題？

• <%@ include file="..." %> 是**靜態包含**，編譯階段合併為單個 Servlet
• 隱藏邏輯若在包含片段內，可能與主頁面樣式衝突
• 建議：包含片段**不包裹外層容器**，由主頁面控制顯隱

調試技巧

// 開發者工具 Console 輸入
document.getElementById('target').style.display // 檢查當前值
getComputedStyle(document.getElementById('target')).display // 獲取最終計算值

// 批量檢查所有隱藏元素
$$('*').filter(el => getComputedStyle(el).display === 'none').length

總結

• ❌ visibility: hidden 保留佔位 → 滾動條不變
• ✅ display: none 釋放佔位 → 滾動條自動調整
• 💡 **原則**：需要「彈出/收起」佈局變化時，首選 display 切換