關於隨視窗彈性縮放的排版，就會想到響應式設計(Responsive design)，但這次遇到的挑戰是網頁式的系統管理介面，UI設計師的設計圖是將畫面分成上下兩部分，頁面上的每個區塊都能隨視窗的寬和高彈性縮放，最外圍不能出現卷軸。(如下圖)

依照Responsive design的方法，寬度可以用百分比定義，但高度卻不能，遍尋不著現成的jQuery，只能往純CSS的方向思考，如何讓五個區塊都能保持高度一致，又不會因為瀏覽器的差異而走位，搜尋了好多解決方案，多次的測試中，終於找到一個規則，在這裡作筆記記錄下來，有同樣困擾的網頁設計們可以試試看，也互相交流，看看能不能有更好的解決方法。

 

寫外層的layout

HTML的結構：
<div id="wrapper"> //這是整頁的容器
    <header id="header">這是header</div> //裡面可以包含logo, navigation, search….
    <section id="main"> //主內容區
     ………….
    </section>
</div>

 

CSS的寫法：

#wrapper {
   position: absolute;
   height: 100%; //讓最外層的寬和高擴展到100%，裡面才有伸展的空間
   width: 100%;
   min-height: 500px; //這個設計有定義瀏覽器縮放的最小寬度和高度，所以加了min-height/min-width.
   min-width: 1280px;
   background-color: #B01BC4;
}

#header, #main {
   position: absolute;
   left: 0px; //讓左邊貼著瀏覽器，右邊同理
   right: 0px;
}

#header {
   background: #017eba;
   height: 40px; //固定高度
}

#main {
   background: #f0f0f0;
   top: 40px; //跟header的高度一樣，
   bottom: 0px; //沒有footer時，bottom為0，讓#main緊貼著瀏覽器下方
}

下一篇來看主內容區能怎麼做? 看完下篇之後，可以在文章最下方下載範例。