系统后台自适应简单框架
<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>系统后台自适应简单框架</title> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <style type="text/css"> html { *background-image:url(about:blank); *background-attachment:fixed;border: none; margin: 0px; padding: 0px;} body{ font-size: 12px; width: 100%;margin: 0px; padding: 0px;} /*清除浮动 S*/ .clearfix { #zoom:1; } .clearfix:after { content:'.'; height:0; line-height:0; display:block; clear:both; visibility:hidden; } /*清除浮动 E*/ #header{ width: 100%; min-height: 100px; background: #ececec; background-color: #ececec;} #center{ width: 100%;min-height: 300px; position: relative; margin: 10px auto; } #center .leftCom{ width: 200px; position: absolute; left: 0; border: 1px solid #ddd; border-left: 0 none; min-height: 300px; z-index: 1;} #center .leftColseOpen{ position: absolute;z-index: 2;cursor: pointer;} #center .rightCom{ width: 100%;position: absolute;border: 1px solid #f00;right: 10px; min-height: 300px; } #footer{ width: 100%;min-height: 50px;background-color: #f60; position: fixed; bottom: 0;} </style> </head> <body> <div id="header"></div> <div id="center" class="clearfix"> <div class="leftCom"></div> <div class="leftColseOpen">关闭</div> <div class="rightCom"></div> </div> <div id="footer"></div> <script type="text/javascript"> var main=(function(){ function windFun(){ var widH=$(window).height(), headH=$("#header").height(), footH=$("#footer").height(), mainH=widH-headH-footH-20, widW=$(window).width(), leftW=$(".leftCom").width(), mainW=widW-leftW-30; $(".leftCom,.rightCom").css("height",mainH); $(".rightCom").css({"width":mainW,"left":leftW+10}); $(".leftColseOpen").css({"top":mainH/2,"left":leftW}); } function colseOpenClick(){ $(".leftColseOpen").toggle(function(){ $(".leftCom").css({"display":"none","width":0}); $(this).text("打开"); windFun(); },function(){ $(".leftCom").css({"display":"block","width":200}); $(this).text("关闭"); windFun(); }) } return{ windFunm:function(){windFun();}, colseOpenClickn:function(){colseOpenClick();} } })(); $(function(){ main.windFunm(); $(window).resize(function(){ main.windFunm(); }) main.colseOpenClickn(); }) </script> </body> </html>