关于随视窗弹性缩放的排版，就会想到响应式设计(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紧贴著浏览器下方
}

下一篇来看主内容区能怎么做? 看完下篇之后，可以在文章最下方下载范例。