純 css 實現 iframe 寬高自適應
阿新 • • 發佈：2019-02-19
從網上找了東西，發現都不適合自己的要求，也有純css實現的，懶得看，大部分是基於js的，當然我的理念是能不用js就不用（這這是個個人怪癖，其實js也沒什麼，畢竟現在99%以上的瀏覽器都支援js了）。於是放慢了自己的腳步，自己研究一下吧。當然這裡不是最完美的，至於哪裡不完美，最後會給出。這裡先給出程式碼。
<!doctype html> <html> <head> <style type="text/css"> .dd1 { height: 200px; width: 200px; border:1px solid red; } .wrapper { position: absolute;top: 0px;left: 250px;right: 10px;bottom: 20px;padding-top:50px;} .dd2 { height: 100%; background:red;} iframe { height: 100%; width: 100%;} * {border:0;margin:0;padding:0} </style> </head> <body> <div class="dd1"> 哈哈哈 </div> <div class="wrapper"> <div class="dd2"> <iframe src="http://dobila.info"></frame> </div> </div> </body> </html>
網上很多東西只是給出瞭解決方法，都沒有表明要解決的是什麼，雖然大體上是說了，但是細節上還是要表述一下的比較好。這裡我要實現的是iframe在右下角，寬高自適應的情況。至於什麼是右下角，做過網站美工的都明白，一般網站後臺，都是要麼在左下方，要麼在右下方顯示主要內容的。
有的同學會說把iframe的寬高設定成100%不就行了嗎？如果你的body裡面只有一個iframe，這樣也行，但是好像沒有人這樣用吧。我們的iframe是在一個框裡面的，而不是直接在body裡面的。
所以首先要實現的是這個包圍iframe的框是隨著你拖動瀏覽器的邊框而自適應改變的，這裡我用position:absolute來實現的，當然你也可以用其他的方法，我是沒用過，不過我覺得應該可以。這裡解釋一下wrapper裡面的屬性，top、left、bottom、right是讓wraper隨著瀏覽器而改變的，這裡為什麼有個padding-top是解決ie6問題的，至於為什麼ie6會出現這個狀況，我也不知道。
然後就是在框內加iframe了，於是我加上了iframe，試了一下，可以，但是ie6又出問題了，寬度變得很寬了，於是我就在iframe外面又加了一層，才把問題解決。我痛恨ie6，但是在中國，大家永遠在用著比別人落後很多的東西而不自覺。