純 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,但是在中國,大家永遠在用著比別人落後很多的東西而不自覺。