<p>100%高度全屏自适应网页布局</p>
<p></p>
<p>http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></p>
<p><br />
<br />
<meta http-equiv="content-type" content="text/html; charset=gb2312"/></p>
<p><br />
<title></title>
<br />
<style type="text/css"><br />
html {height:100%;max-height:100%;padding:0;margin:0;border:0;background:#fff;font-size:76%;font-family:georgia, palatino linotype, times new roman, serif,"宋体";<br />
/* hide overflow:hidden from IE5/Mac */<br />
/* */<br />
overflow: hidden;<br />
/* */<br />
}<br />
html {<br />
scrollbar-face-color:orange;<br />
scrollbar-highlight-color:#fff;<br />
scrollbar-shadow-color:#c00;<br />
scrollbar-3dlight-color:#c00;<br />
scrollbar-arrow-color:#000;<br />
scrollbar-track-color:#c0c0c0;<br />
scrollbar-darkshadow-color:#fff;<br />
}<br />
body{height:100%;max-height:100%;overflow:hidden;padding:0;margin:0; border:0;}<br />
#content{overflow:auto; position:absolute; z-index:3; top:100px; width:96%;bottom:80px; left:2%; background:#666;}<br />
*html #content {top:0; left:2%; height:100%; max-height:100%; width:96%; overflow:auto;position:absolute; z-index:3; border-top:100px solid #fff; border-bottom:80px solid #fff;}<br />
#head{position:absolute;margin:0;top:0;left:1px;display:block;width:100%;height:90px;background:orange;background-position:0 0; background-repeat:no-repeat;font-size:4em;z-index:5;overflow:hidden;color:#fff;border-bottom:1px #c0c0c0 solid;text-align:center;}<br />
#foot{position:absolute; margin:0;bottom:0;left:2%;display:block;width:96%;height:70px;font-size:1em;z-index:5;overflow:hidden;color:#fff;text-align:center;}<br />
#content p,h2{padding:10px;font-size:12px;color:#fff;}<br />
#content p.bold {font-size:1.2em; font-weight:bold;color:red;}<br />
#logo{height:75px;line-height:75px;text-align:center;display:block;}<br />
.footleft{width:20%;height:70px;line-height:70px;float:left;border:1px #c0c0c0 solid;background:blue;}<br />
.footmid{width:58%;height:70px;line-height:70px;margin-left:1%;float:left;border:1px #c0c0c0 solid;background:blue;}<br />
.footright{width:20%;height:70px;line-height:70px;float:right;border:1px #c0c0c0 solid;background:blue;}<br />
a:link,a:visited{color:#fff;}<br />
</style>
<br />
<br />
</p>
<p></p>
<p></p>
<div id="head"><br />
<span id="logo">100%高度全屏自适应布局</span></div>
<p>
<div id="foot">
<div class="footleft">
<div class="footmid">
<div class="footright"></div>
<div id="content">
<h2><a div="" href="<a href=" http:="" www.webjx.com="">此布局惟一的遗憾是在IE6以下浏览器中显示为怪异模式,因为HTML代码的头一句加了一个注释,如果删除后在IE中滚动条高度显示不全.</a></h2>
<p class="bold"><a div="" href="<a href=" http:="" www.webjx.com="">此布局在以下浏览器中测试通过: IE5.5,IE6,IE7,TT,Opera 9.63,Firefox3.0,谷歌，IE8未作测试。</a></p>
<p><a div="" href="<a href=" http:="" www.webjx.com=""></a></p>
<p><a div="" href="<a href=" http:="" www.webjx.com=""></a></p>
<p><a div="" href="<a href=" http:="" www.webjx.com=""></a></p>
<p><a div="" href="<a href=" http:="" www.webjx.com=""></a></p>
<p><a div="" href="<a href=" http:="" www.webjx.com=""></a></p>
<p><a div="" href="<a href=" http:="" www.webjx.com=""></a></p>
<p><a div="" href="<a href=" http:="" www.webjx.com=""></a></p>
<p><a div="" href="<a href=" http:="" www.webjx.com=""></a></p>
<p><a div="" href="<a href=" http:="" www.webjx.com=""></a></p>
<p><a div="" href="<a href=" http:="" www.webjx.com=""></a></p>
<p><a div="" href="<a href=" http:="" www.webjx.com=""></a></p>
<p><a div="" href="<a href=" http:="" www.webjx.com=""></a></p>
<p><a div="" href="<a href=" http:="" www.webjx.com=""></a></p>
<p><a div="" href="<a href=" http:="" www.webjx.com=""></a></p>
<p><a div="" href="<a href=" http:="" www.webjx.com=""></a></p>
<p><a div="" href="<a href=" http:="" www.webjx.com=""></a></p>
<p><a div="" href="<a href=" http:="" www.webjx.com=""></a></p>
<p><a div="" href="<a href=" http:="" www.webjx.com=""></a></p>
<p><a div="" href="<a href=" http:="" www.webjx.com=""></a></p>
<p><a div="" href="<a href=" http:="" www.webjx.com=""></a></p>
<p><a div="" href="<a href=" http:="" www.webjx.com=""></a></p>
<p><a div="" href="<a href=" http:="" www.webjx.com=""></a></p>
<p><a div="" href="<a href=" http:="" www.webjx.com=""></a></p>
</div>
<br />
<br />
<br />
<a div="" href="<a href=" http:="" www.webjx.com=""></a>
<p></p>
</div>
</div>
</div>
</p>