移動端 iframe 填滿父級 Div 的完美解決方案

核心問題

移動端瀏覽器預設 viewport 縮放、body margin、iframe 邊框、父級高度塌陷，導致留白。

關鍵 CSS 組合拳

<style>
html, body, #page { height: 100%; margin: 0; padding: 0; }
#divClient { 
    position: absolute; 
    top: 40px; /* header 高度 */ 
    bottom: 0; 
    left: 0; right: 0; 
    overflow: hidden; 
}
#frmClient { 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    border: none; 
    background: white; 
}
</style>

HTML 結構調整

<div id="page">
  <div class="header">標題</div>
  <div class="content" id="divClient">
    <iframe id="frmClient" src="https://example.com"></iframe>
  </div>
  <nav id="menu"></nav>
</div>

關鍵點清單

1. html,body{height:100%} 建立參考高度
2. #divClient{position:absolute;top:40px;bottom:0} 自適應剩餘高度
3. iframe{position:absolute;width:100%;height:100%} 填滿父級
4. border:none 消除預設邊框
5. viewport 標籤：<meta name="viewport" content="width=device-width,initial-scale=1.0">

跨域限制提醒

若 iframe 跨域，父頁無法訪問其內部 DOM/高度。解決：
① 同域部署
② 目標頁配合 postMessage 傳遞高度
③ 服務端代理/反向代理實現同源

總結

移動端 iframe 填滿父級 = 父級絕對定位高度自適應 + iframe 絕對定位 100% + 消除邊框/邊距 + viewport 適配。按上述 CSS 結構調整，即可在 iOS Safari / Android Chrome 完美全屏嵌入。