網頁佈局方案:彈性流體佈局

在我的另一篇文章《彈性+固寬佈局》中，我介紹了彈性加最小固定寬度的一種佈局方案，現在介紹另一種佈局方案---彈性流體佈局。

那種方案其實就是這種佈局的變通應用。彈性佈局最大的優點就是能充分利用屏幕空間。無論客戶端分辯率多大，都能自動適應寬度的變化。

圖一

看看上面這幅圖片，這是國外的一個網站，它本身是固定寬度佈局的，我們的佈局就以這幅圖為基礎來講解的。當然，我不會全面介紹如何製作這個完整頁面，我只針對重點做一下講解。

其實做一個彈性佈局，相對來說是比較簡單的，但是這種佈局雖簡單，可是對於細節上的把握才是這種佈局的精髓。彈性佈局雖說有這麼好的優點，可是卻有比較致命的缺陷：

1. 如果不對這種佈局設置一個最小寬度，當用戶縮小窗口到足夠小時，會對佈局產生致命的影響。造成嚴重影響佈局錯位。
2. 當一個頁面彈性佈局時，對於里面的圖片會產生巨大的影響。因為到目前為至，還沒有解決圖片隨百分比縮放的問題。

   所以這篇文章對於佈局的講解可能還相對少些，而更多的是解決上面的兩個問題，我相信只要解決了上面的兩個問題，這種佈局相對來說就容易多了。

一般彈性佈局都是利用百分比來設置一個容器的寬度。這樣就能自動適應屏幕的寬度了。但是寬度值不能完全由用戶自由縮放，我們必須在這個百分比寬度限制其最小寬度，當用戶縮小窗口到一定值，就不讓窗口再縮放了。

熟悉css的朋友都知道，有這樣四個屬性：

• min-width:最小寬度
• max-width:最大寬度
• min-height:最小高度
• max-height:最大高度

這四個屬性剛好能解決這個問題，是不是比較欣喜，可是，別忙，雖說它們能解決這個問題，可是卻有一個嚴重的問題，用戶使用最多的瀏覽器ie6卻不支持這幾個屬性，這是一件非常糟糕的事情。我們總不能丟棄用戶最多的瀏覽器吧！

目前網上比較流行的有四種方法來解決讓ie6支持這四種屬性：

1. 在css中expression來設置最小寬度，比較費內存。
2. 用嵌套div,然後用margin偏移模仿實現，多冗餘結構。
3. 用jq框架實現，為一個屬性加一個js框架，有點不划算。
4. 用純js代碼實現。

前面三種都有劣勢，請各自選擇最合適的方法，我偏重於最後一種，這是國外的一個牛人實現的，相關例子可以看這兒：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，現在我們解決了最小寬度的問題。