【網頁筆記】隨視窗彈性縮放的架構 (上)
關於隨視窗彈性縮放的排版,就會想到響應式設計(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緊貼著瀏覽器下方
}
下一篇來看主內容區能怎麼做? 看完下篇之後,可以在文章最下方下載範例。