7.3 固定寬度、流體和彈性佈局
到目前爲止，所有示例都使用以像素爲單位定義的寬度。這種佈局類型稱爲固定寬度的佈局，由於它是剛性的，有時候也稱爲 "冰佈局"。固定寬度的佈局非常常見，因爲它們使開發人員對佈局和定位有更大的控制能力。如果將設計的寬度設置爲 720 像素，它就總是 720像素寬。這樣的話，如果想讓一個品牌圖像橫跨設計的頂部，那麼你知道這個圖像需要寬 720 像素。知道每個元素的精確寬度，就能夠對它們進行精確地佈局，而且知道所有東西在什麼地方。這樣的可預測性使固定寬度的佈局成爲迄今爲止最常用的佈局方法。
但是，固定寬度的佈局有缺點。首先，因爲它們是固定的，所以無論窗口的尺寸有多大，它們的尺寸總是不變。因此，它們無法充分利用可用空間。在高分辨率的屏幕上，爲 800X600 分辨率創建的設計會縮小並且出現在屏幕的中間。反之，爲 1024X768 分辨率創建的設計在低分辨率的屏幕上會導致水平滾動。隨着屏幕尺寸範圍越來越大，固定寬度設計的缺點越來越明顯了。
固定寬度設計的另一個問題涉及行長和文本的易讀性。固定寬度的佈局對於瀏覽器默認文本字號往往是合適的。但是，只要將文本字號增加幾級，邊欄就會擠滿空間並且行長太短，閱讀起來不舒服。
爲了解決這些問題，可以使用流體佈局或彈性佈局替代固定寬度的佈局。
7.3.1 流體佈局
在使用流體佈局時，尺寸是用百分數而不是像素設置的。這使流體佈局能夠相對於瀏覽器窗口進行伸縮。隨着瀏覽器窗口變大，列變寬。相反，隨着窗口變小，列的寬度減小。流體佈局可以非常高效地使用空間，最好的流體佈局甚至不會引起用戶的注意。
但是，流體佈局也不是沒有問題的。在窗口寬度小的時候，行變得非常窄，很難閱讀。在多列布局中尤其如此。因此，有必要添加以像素或 em 爲單位的 min-width，從而防止佈局變得太窄。
與之相反，如果設計跨越瀏覽器窗口的整個寬度，那麼行就變得太長，也很難閱讀。可以採取幾個措施來避免這個問題。首先，不要跨越整個寬度，而是讓容器只跨越寬度的一個百分比，比如 85%。還可以考慮用百分數設置填充和空白邊。這樣的話，填充和空白邊的寬度將隨着窗口的尺寸而變，防止列太快地變得過寬。最後，對於非常嚴重的情況，也可以選擇以像素設置容器的最大寬度，以防止內容在大顯示器上變得極寬。
可以使用這些技術將前面的固定寬度的三列布局轉換爲流體三列布局。首先，將容器寬度設置爲窗口總寬度的百分數。在這個示例中，我選擇 85%，因爲這會在一定的屏幕尺寸範圍中產生比較好的效果。接下來，將導航和內容區域的寬度設置爲容器寬度的百分數。經過幾次嘗試之後發現，將導航區域設置爲23%、將內容區域設置爲 75%會產生比較好的效果。這在導航和內容區域之間留出 2% 的視覺隔離帶，這可以防止任何舍入錯誤和寬度差錯破壞佈局：
#wrapper {
width: 85%;
}
#mainNav {
width: 23%;
float: left;
}
#content {
width: 75%;
float: right;
}
然後需要設置內容區域中列的寬度。這需要點兒技巧，因爲內容 div 的寬度基於內容元素的寬度，而不是整個容器。如果希望 secondaryContent 的寬度與主導航相同，那麼需要計算出容器寬度的 23% 是內容區域寬度的百分之多少。將 23 (導航寬度) 除以 75 (內容區域的寬度)，再乘以 100 ，結果大約是 31%。希望兩個列之間的隔離帶寬度與導航和內容區域之間的隔離帶相同。使用同樣的方法計算出大約 3%，這意味着主內容區域的寬度應該是 66%：
這產生一個最適合 1024X768 分辨率的流體佈局，但是在更大和更小的屏幕分辨率上閱讀起來也比較舒服 (見圖 7-6)。
#mainContent {
width: 66%;
float: left;
}
#secondaryContent {
width: 31%;
float: right;
}
因爲這個佈局會恰當地伸縮，所以不需要添加 max-width 屬性。但是，對於小尺寸，內容會太窄，所以可以在容器元素上設置最小寬度爲 720 像素。
7.3.2 彈性佈局
雖然流體佈局可以充分利用可用空間，但是在大分辨率顯示器上行仍然會過長，讓用戶不舒服。相反，在窄窗口中或者在增加文本字號時，行會變得非常短，內容很零碎。對於這個問題，彈性佈局可能是一種解決方案。
彈性佈局相對於字號 (而不是瀏覽器寬度) 來設置元素的寬度。通過以 em 爲單位設置寬度，可以確保在字號增加時整個佈局隨之擴大。