网页设计% CSS自适应将header&footer图片fixed置于头尾 用于手机版页面

1. 用隨便的圖撐起header及footer

遵照原本的排版(width:100%), 先將fixed與z-index最高的css生出作為工具用, 直接把原本的header跟footer做一個起來撐起fixed浮起的位置
優點: 因為是視為圖片寬度%數縮放, 更改瀏覽器尺寸時不會造成圖片固定高度擠壓
缺點: 代碼太多, 而且方法感覺有點蠢, (?)
代码块

.fixed{
   position: fixed}

.z-in{
    z-index: 9999
}
.footer{
    max-width:900px;
    position: relative;
    z-index: 10;
    bottom: 0;
    }

<div class="fixed z-in"> <img src="images/header.jpg" width="100%"> </div>
<div><!--撐出fixed--><img src="images/header.jpg" width="100%"> </div>
.
.
.
<!--撐出fixed-->
            <div class="footer">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <th width="14%"> <img src="images/footer01on.jpg" width="100%"> </th>
                        <td width="14%"><img src="images/footer02.jpg" width="100%"></td>
                        <td width="14%"> <img src="images/footer03.jpg" width="100%"> </td>
                        <td widt