私人领地

网页js，DIV全屏布局 

<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{width: 100%;height: 80px; background: #4ebbd2}
#content{}
#con-left{width: 200px; height: 100%; background: #6fcce0; float: left }
#con-center{float: left; width: 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>

 

posted @ 2015-04-23 18:54  狂奔的蜗牛Snails  阅读(697)  评论(0)  编辑  收藏  举报