<script type="text/javascript"> $(document).ready(function(){ findDimensions(); }); function findDimensions(){ var h = document.documentElement.clientHeight-120; $("#maincontent").css("height",h); } window.onresize=findDimensions; </script>
整体案例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>亮星ERP管理系统 V1.0</title> <script type="text/javascript" src="__PUBLIC__/js/jquery-1.11.3.min.js"></script> <!--载入bootstrap--> <script type="text/javascript" src="__PUBLIC__/js/bootstrap/bootstrap.min.js"></script> <link type="text/css" href="__PUBLIC__/js/bootstrap/bootstrap.css" rel="stylesheet"/> <link type="text/css" href="__Template__/css/style.css" rel="stylesheet"/> <style type="text/css"> body{font:12px/1.5 Arial; margin: 0; padding: 0; /*background: #f1f1f1*/} a{text-decoration: none;} .clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;} .hide{display: none} .show{display: block} /*共享框架*/ .header{ 100%;height: 80px; background: #4ebbd2} #content{} #con-left{ 200px; height: 100%; background: #6fcce0; float: left } #con-center{float: left; 10px; height: 100%; background: #4ebbd2; } #con-center img{cursor: pointer} #con-right{margin-left: 210px; height: 100%; background: #f1f1f1} .logo{float: left; padding: 10px 0 0 10px; vertical-align: middle} </style> <script type="text/javascript"> $(document).ready(function(){ findDimensions(); }); function findDimensions(){ var h = document.documentElement.clientHeight-80; $("#content").css("height",h); $("#con-center img").css("margin-top",h/2); } window.onresize=findDimensions; function hideLeft(obj){ $div = $('#con-left'); $display = $div.css('display'); if($display =='block'){ $div.addClass('hide'); $('#con-right').css('margin-left',10); obj.src = '__Template__images/arrow_rig2.gif'; }else{ $div.removeClass('hide'); $('#con-right').css('margin-left',210); obj.src = '__Template__images/arrow_left.gif'; } } </script> </head> <body> <!--共享头部--> <header class="header"> <div class="logo"><img src="__Template__images/logo.png" /></div> </header> <div id="content"> <!--共享左侧--> <div id="con-left"></div> <!--共享中间--> <div id="con-center"><img src="__Template__images/arrow_left.gif" onclick="hideLeft(this)" /></div> <!--右侧--> <div id="con-right">1</div> </div> </body> </html>