css js div显示隐藏|css+js+div 自适应浏览器代码

更新时间：2015-11-25 来源：浏览器手机版 字体：大中小

【www.bbyears.com--浏览器】

提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312"/>
<title>自适应满屏高度的布局-</title>
<style type="text/css">
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,"宋体";
/* hide overflow:hidden from IE5/Mac */ 
/* */ 
overflow: hidden; 
/* */ 
}
html {
	scrollbar-face-color:orange;
	scrollbar-highlight-color:#fff;
	scrollbar-shadow-color:#c00;
	scrollbar-3dlight-color:#c00;
	scrollbar-arrow-color:#000;
	scrollbar-track-color:#c0c0c0;
	scrollbar-darkshadow-color:#fff;
	}
body{height:100%;max-height:100%;overflow:hidden;padding:0;margin:0; border:0;}
#content{overflow:auto; position:absolute; z-index:3; top:100px; width:96%;bottom:80px; left:2%; background:#666;}
*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;}
#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;}
#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;}
#content p,h2{padding:10px;font-size:12px;color:#fff;}
#content p.bold {font-size:1.2em; font-weight:bold;color:red;}
#logo{height:75px;line-height:75px;text-align:center;display:block;}
.footleft{width:20%;height:70px;line-height:70px;float:left;border:1px #c0c0c0 solid;background:blue;}
.footmid{width:58%;height:70px;line-height:70px;margin-left:1%;float:left;border:1px #c0c0c0 solid;background:blue;}
.footright{width:20%;height:70px;line-height:70px;float:right;border:1px #c0c0c0 solid;background:blue;}
a:link,a:visited{color:#fff;}
</style>
</head>
<body>
 
	100%高度全屏自适应布局

冰极峰
	冰极峰
	冰极峰

<h2>此布局惟一的遗憾是在IE6以下<a href="http://www.bbyears.com/clist-122-1.html" target="_blank" class="keylink">浏览器</a>中显示为怪异模式,因为HTML代码的头一句加了一个注释,如果删除后在IE中滚动条高度显示不全.</h2>
 此布局在以下<a href="http://www.bbyears.com/clist-122-1.html" target="_blank" class="keylink">浏览器</a>中测试通过: IE5.5,IE6,IE7,TT,Opera 9.63,Firefox3.0,谷歌，IE8未作测试。

</body>
</html>

提示：您可以先修改部分代码再运行

本文来源：http://www.bbyears.com/bangongshuma/19772.html

链接：http://www.bbyears.com/bangongshuma/19772.html
css js div显示隐藏|css+js+div 自适应浏览器代码(转载时请注明本文出处及链接)

猜你感兴趣

全能毒妃免费_免费全能100M空间申请 2015-11-25
非主流空间个性签名图片大全|非主流空间个性签名图片 2015-11-25
[李开复是百度的创始人]李开复：谷歌中国产品已到位只缺网民信任 2015-11-25
【网页设计师联盟】网页设计师 2000~8000元/月 2015-11-25
腾讯新闻怎么发布_腾讯发布第三代QQ 2015-11-25
网页设计师联盟_网页设计师 4000-5000/北京市 2015-11-25
[淘宝网首页]淘宝网将于5月推出大学生创业平台 2015-11-25
网站被劫持怎么修复_网站被封原因有那些 2015-11-25
【汽车网站排名】网站取得好排名方法 2015-11-25
免费空间列表_免费空间支持ASP，PHP，ASPX/无流量限制 2015-11-25

本类排行

本类最新

更多>>

css js div显示隐藏|css+js+div 自适应浏览器代码

猜你感兴趣

热门标签

本类排行

本类最新