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

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

layout01.jpg

 

寫外層的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緊貼著瀏覽器下方
}

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

創作者介紹

一個人的聚光燈

月光獨舞 發表在 痞客邦 PIXNET 留言(0) 人氣()