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

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

圖一

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

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

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，現在我們解決了最小寬度的問題。