如何在沒有 JavaScript 的情況下使 Iframe 填充其容器的剩餘高度?
無需JavaScript,讓iframe 適合容器剩餘高度的100%
設計同時包含橫幅和iframe 的網頁時,實現iframe 自動的佈局調整以填充剩餘高度可能會帶來挑戰。
初始嘗試
將 iframe 的高度設定為「100%」似乎是一個簡單的解決方案。然而,這種方法試圖填滿整個頁面高度,包括橫幅區域。結果,出現了不必要的垂直滾動條。
使用 CSS Margin 和 Padding
雖然 CSS margin 和 padding 可以有效填充 DIV 元素的剩餘高度,但此策略並未如預期運作iframes。
解決方案
要解決此問題,請考慮使用 flexbox,這是一個 CSS 佈局模組,它為這種情況提供了可靠的解決方案。以下是使用Flexbox 的程式碼範例:
body, html { width: 100%; height: 100%; margin: 0; padding: 0; } .row-container { display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden; } .first-row { background-color: lime; } .second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }
登入後複製
<div class="row-container"> <div class="first-row"> <p>Some text</p> <p>And some more text</p> </div> <iframe src="https://jsfiddle.net/about" class="second-row"></iframe> </div>
登入後複製
此Flexbox 佈局可確保橫幅(.first-row) 具有固定高度,而iframe (.second-row) 會擴充以填滿剩餘高度。 「flex-grow」屬性指示 iframe 成長以佔據任何可用空間。
此技術有效地使 iframe 達到容器剩餘高度的 100%,無縫適應瀏覽器大小調整。
以上是如何在沒有 JavaScript 的情況下使 Iframe 填充其容器的剩餘高度?的詳細內容。更多資訊請關注PHP中文網其他相關文章!
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章
Windows 11 KB5054979中的新功能以及如何解決更新問題
4 週前
By DDD
如何修復KB5055523無法在Windows 11中安裝?
3 週前
By DDD
Inzoi:如何申請學校和大學
1 個月前
By DDD
如何修復KB5055518無法在Windows 10中安裝?
3 週前
By DDD
在哪裡可以找到Atomfall中的站點辦公室鑰匙
4 週前
By DDD

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)