在我的另一篇文章《彈性+固寬佈局》中,我介紹了彈性加最小固定寬度的一種佈局方案,現在介紹另一種佈局方案---彈性流體佈局。
那種方案其實就是這種佈局的變通應用。彈性佈局最大的優點就是能充分利用屏幕空間。無論客戶端分辯率多大,都能自動適應寬度的變化。
圖一
看看上面這幅圖片,這是國外的一個網站,它本身是固定寬度佈局的,我們的佈局就以這幅圖為基礎來講解的。當然,我不會全面介紹如何製作這個完整頁面,我只針對重點做一下講解。
其實做一個彈性佈局,相對來說是比較簡單的,但是這種佈局雖簡單,可是對於細節上的把握才是這種佈局的精髓。彈性佈局雖說有這麼好的優點,可是卻有比較致命的缺陷:
所以這篇文章對於佈局的講解可能還相對少些,而更多的是解決上面的兩個問題,我相信只要解決了上面的兩個問題,這種佈局相對來說就容易多了。
一般彈性佈局都是利用百分比來設置一個容器的寬度。這樣就能自動適應屏幕的寬度了。但是寬度值不能完全由用戶自由縮放,我們必須在這個百分比寬度限制其最小寬度,當用戶縮小窗口到一定值,就不讓窗口再縮放了。
熟悉css的朋友都知道,有這樣四個屬性:
這四個屬性剛好能解決這個問題,是不是比較欣喜,可是,別忙,雖說它們能解決這個問題,可是卻有一個嚴重的問題,用戶使用最多的瀏覽器ie6卻不支持這幾個屬性,這是一件非常糟糕的事情。我們總不能丟棄用戶最多的瀏覽器吧!
目前網上比較流行的有四種方法來解決讓ie6支持這四種屬性:
前面三種都有劣勢,請各自選擇最合適的方法,我偏重於最後一種,這是國外的一個牛人實現的,相關例子可以看這兒:http://www.doxdesk.com/software/js/minmax.html
有了這個js文件,你只需要在頭部調用這個js文件就可以了。
ps:在演示模型中為了方便,我將這個js作為內部引用的方式調用,你們在實際應用中將這個js文件新建為一個js外部文件,如下方式調用:
<script type=text/javascript src=minmax.js></script>
我們在樣式表中將min-width應用到#wrapper和#footer這兩個容器就行了,並分別設置它們寬度為100%,ok,現在我們解決了最小寬度的問題。