【CSS】頁頭頁尾不隨頁面內容之捲動

近來透過手機上網普及化，設計好的專屬手機網站，顯得重要許多，一方面受限於手機螢幕大小，版頭版尾擺設格外小心，分享實際應用情形。

部分HTML（參考）︰
<!-- Fixed Header Start-->
<div id="fixed-header-slide">
<div id="fixed-header-wrap">
<header data-role="header" style="background: #FFFFFF;border: none;" > <!-- 頁頭 -->
<div><img src="images/logo_banner.jpg" border="0" class="photo">
<a href="#mypanel" class="ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
</div>
</header>
</div>
</div>
<!-- Fixed Header End-->

<!-- Fixed Footer Start-->
<div id="fixed-footer-wrap">
<footer data-role="footer"> <!-- 頁尾 -->
<div class="footer_mobile" id="footer">
… 省略 …
</div>
</footer>
</div>
<!-- Fixed Footer End-->

CSS（參考）︰
<style type="text/css">
/*固定頁頭 Start--------------*/
#fixed-header-slide {
width: 100%;
height: 70px; /* 視情況而定(本例依圖片高度而設定) */
position: fixed;
top: 0px;
z-index: 2;
}
#fixed-header-wrap {
width: 100%;
height: 70px; /* 視情況而定(本例依圖片高度而設定) */
position: absolute;
bottom: 0px;
}
header {
width: 100%;
height: 70px; /* 視情況而定(本例依圖片高度而設定) */
margin: 0 auto;
position: relative;
z-index: 1;
}
/*固定頁頭 End----------------*/

/*固定頁尾 Start--------------*/
#fixed-footer-wrap {
width: 100%;
height: 40px; /* 視情況而定 */
position: fixed;
bottom: 0px;
z-index: 3;
overflow: visible;
}
.footer_mobile {
background-color:#999999;
color: #ffffff;
width: 100%;
height: 40px; /* 視情況而定 */
margin: 0 auto;
}
/*固定頁尾 End--------------*/
</style>

執行畫面︰

PS︰header及footer Tags可以用div取代