咨询热线:

盈丰娱乐官网下注

100%高度全屏自适应网页布局

2018-12-28 07:39

100%高度全屏自适应布局。 !--PutIEintoquirksmode--!DOCTYPEhtmlPUBLIC-//W3C////ENhttp:///TR/xhtml1/DTD/=http:///1999/xhtmlheadmetahttp-equiv=content-typecontent=text/html;charset=gb2312/title自适应满屏高度的布局-网页教学网/titlestyletype=text/csshtml{height:100%;max-height:100%;padding:0;margin:0;border:0;background:#fff;font-size:76%;font-family:georgia,palatinolinotype,timesnewroman,serif,宋体/*hideoverflow:hiddenfromIE5/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:100pxsolid#fff;border-bottom:80pxsolid#fff;}#head{position:absolute;margin:0;top:0;left:1px;display:block;width:100%;height:90px;background:orange;background-position:00;background-repeat:no-repeat;font-size:4em;z-index:5;overflow:hidden;color:#fff;border-bottom:1px#c0c0c0solid;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;}#contentp,h2{padding:10px;font-size:12px;color:#fff;}#{font-size:;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#c0c0c0solid;background:blue;}.footmid{width:58%;height:70px;line-height:70px;margin-left:1%;float:left;border:1px#c0c0c0solid;background:blue;}.footright{width:20%;height:70px;line-height:70px;float:right;border:1px#c0c0c0solid;background:blue;}a:link,a:visited{color:#fff;}/style/headbodydivid=headspanid=logo100%高度全屏自适应布局/span/divdivid=footdivclass=footleftahref=http:///网页教学网/a/divdivclass=footmidahref=http:///网页教学网/a/divdivclass=footrightahref=http:///网页教学网/a/div/divdivid=contenth2此布局惟一的遗憾是在IE6以下浏览器中显示为怪异模式,因为HTML代码的头一句加了一个注释,如果删除后在IE中滚动条高度显示不全./h2pclass=bold此布局在以下浏览器中测试通过:,IE6,IE7,TT,,,谷歌,IE8未作测试。 /ppnbsp;/ppnbsp;/ppnbsp;/ppnbsp;/ppnbsp;/ppnbsp;/ppnbsp;/ppnbsp;/ppnbsp;/ppnbsp;/ppnbsp;/ppnbsp;/ppnbsp;/ppnbsp;/ppnbsp;/ppnbsp;/ppnbsp;/ppnbsp;/ppnbsp;/ppnbsp;/ppnbsp;/ppnbsp;/ppnbsp;/p/div/body/html[提示:你可先修改部分代码,再按Ctrl+A全部选择]。


点击这里给我发消息点击这里给我发消息