純 css 實現 iframe 寬高自適應

來源:互聯網
上載者:User
 

從網上找了東西,發現都不適合自己的要求,也有純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,但是在中國,大家永遠在用著比別人落後很多的東西而不自覺。

--http://www.phpabc.cn/chun-css-shi-xian-iframe-kuan-gao-zi-shi-ying.html

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.