利用CSS和JavaScript讓iframe高度自適應，無需固定設置

一、什麼是iframe

iframe (inline frame) 是 HTML 中的一種元素，可以在一個頁面中引入另一個頁面的內容。 您可以把 iframe 想像成一個在當前頁面嵌入的窗口，裡面可以顯示來自不同網址的內容。

二、為什麼要讓iframe高度自適應

當我們在網頁中加入了iframe元素時，可能會遇到高度固定，不能自適應的問題。這樣就會導致iframe內嵌頁面的內容無法完全顯示出來，而且頁面的布局也會受到影響。所以，讓iframe高度自適應是必須的。

三、如何使用CSS讓iframe高度自適應

我們可以使用CSS來讓iframe的高度自適應，只需要將其父級元素設置為相對定位，再將iframe元素設置為絕對定位，並設置其top和bottom屬性為0。

<div style="position:relative;">
  <iframe src="example.html" style="position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%;border:none;padding:0;margin:0;overflow:auto"></iframe>
</div>

這段代碼中，我們將div元素設置為相對定位，在其內部嵌套了一個iframe元素並設置為絕對定位，接著將top和bottom屬性均設置為0，使得iframe元素的高度可以自適應。

四、如何使用JavaScript讓iframe高度自適應

有些情況下，使用CSS無法實現iframe高度自適應，因為iframe內嵌頁面的高度會隨著內容的變化而變化。這時我們可以使用JavaScript來動態調整iframe的高度，以實現自適應效果。

<script>
function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
}
</script>
 
<iframe src="example.html" onload="resizeIframe(this)"></iframe>

這段代碼中，我們定義了一個名為resizeIframe的函數，其作用是調整iframe元素的高度。在iframe元素中添加了一個onload事件，使得當內嵌頁面載入完成時觸發resizeIframe函數，從而實現iframe高度自適應。

五、結語

通過以上的介紹，我們可以掌握如何使用CSS和JavaScript讓iframe高度自適應，從而解決iframe高度固定的問題。這樣可以提高網頁的可用性，增強用戶體驗。