<script type="text/javascript">

$(document).ready(function(){

    findDimensions();

});

function findDimensions(){

    var h = document.documentElement.clientHeight-;

    $("#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.</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: ; padding: ; /*background: #f1f1f1*/}

a{text-decoration: none;}

.clearfix:after {content:".";display:block;height:;clear:both;visibility:hidden;}

.hide{display: none}

.show{display: block}

/*共享框架*/

.header{width: %;height: 80px; background: #4ebbd2}

#content{}

#con-left{width: 200px; height: %; background: #6fcce0; float: left }

#con-center{float: left; width: 10px; height: %; background: #4ebbd2; }

#con-center img{cursor: pointer}

#con-right{margin-left: 210px; height: %; background: #f1f1f1}

.logo{float: left; padding: 10px   10px; vertical-align: middle}

</style>

<script type="text/javascript">

$(document).ready(function(){

    findDimensions();

});

function findDimensions(){

    var h = document.documentElement.clientHeight-;

    $("#content").css("height",h);

    $("#con-center img").css("margin-top",h/); 

}

window.onresize=findDimensions;

function hideLeft(obj){

    $div = $('#con-left');

    $display = $div.css('display');

    if($display =='block'){

        $div.addClass('hide');

        $('#con-right').css('margin-left',);

        obj.src = '__Template__images/arrow_rig2.gif';

    }else{

        $div.removeClass('hide');

        $('#con-right').css('margin-left',);

        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"></div>

</div>

</body>

</html>

网页js，DIV全屏布局的更多相关文章

  1. Css学习总结（3）——CSS布局解决方案 - 水平、垂直居中、多列布局、全屏布局

    居中布局 水平居中 子元素于父元素水平居中且其(子元素与父元素)宽度均可变. inline-block + text-align <div class="parent"> ...

  2. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  3. CSS全屏布局的5种方式

    × 目录 [1]float [2]inline-block [3]table[4]absolute[5]flex[6]总结 前面的话 全屏布局在实际工作中是很常用的,比如管理系统.监控平台等.本文将介 ...

  4. js控制全屏及退出全屏

    js控制全屏及退出全屏,网上很多代码例子,我这里需求和标准的有点出入: 1.当用户点击某按钮,触发iframe下的页面全屏. 2.不允许用户退出全屏. 解决第一点,触发全屏可以按照网上的例子,代码如下 ...

  5. CSS全屏布局的6种方式

    前面的话 全屏布局在实际工作中是很常用的,比如管理系统.监控平台等.本文将介绍关于全屏布局的6种思路 float [1]float + calc 通过calc()函数计算出.middle元素的高度,并 ...

  6. fullpage.js jq全屏滚动插件

    fullPage.js和fullPage都能实现全屏滚动,二者区别是:fullPage.js需依赖于JQuery库,而fullPage不需要依赖任何一个js库,可以单独使用. (代码演示效果并且可以下 ...

  7. day09—css布局解决方案之全屏布局

    转行学开发,代码100天——2018-03-25 今天,本文记录全屏布局的的方法.全屏布局,即滚动条不是全局滚动条,而是出现在内容区域内,:浏览器变大时,撑满窗口. 如:设置下图中布局,其中top区, ...

  8. height:100%不起作用（无效），div全屏

    当父容器是body时,height:100%不起作用(无效),解决办法:在css代码段中添加 html, body{ margin:0; height:100%; } 实现div全屏的时候需要上面那段 ...

  9. iOS 全屏布局

    edgesForExtendedLayout属性用于替代wantsFullScreenLayout,控制页面显示的范围,默认值是UIRectEdgeAll automaticallyAdjustsSc ...

随机推荐

  1. 访问修饰符(public,private,protected,internal,sealed,abstract)

    为了控件C#中的对象的访问权限,定义对象时可以在前面添加修饰符. 修饰符有五种:private(私有的),protected(受保护的),internal(程序集内部的),public(公开的),以及 ...

  2. mysql-查询一天，一周，一月，一年，以及mysql的基本日期函数

    查询一天: select * from table where to_days(column_time) = to_days(now()); select * from table where dat ...

  3. git初体验（七）多账户的使用

    多github帐号的SSH key切换 我有两个github帐号,一个是个人所用,一个是为公司项目所用.如果是单用户(single-user),很方便,默认拿id_rsa与你的github服务器的公钥 ...

  4. Selenium+WebDriver+Python 定时控制任务

    为了更对得起"自动化测试"的名号,我们可以设置定时任务,使我们自动化脚本在某个时间点自动运行脚本,这样就可以让测试在夜间进行,减少了时间成本.通过程序来控制test case在什么 ...

  5. 【POJ 3041】Asteroids (最小点覆盖)

    每次选择清除一行或者一列上的小行星.最少选择几次. 将行和列抽象成点,第i行为节点i+n,第j列为节点j,每个行星则是一条边,连接了所在的行列. 于是问题转化成最小点覆盖.二分图的最小点覆盖==最大匹 ...

  6. 【HDU 5744】Keep On Movin

    找出奇数个的数有几个,就分几组. #include<cstdio> #include<cstring> #include<algorithm> #include&l ...

  7. BuiltWith

    BuiltWith网站技术信息查询工具 利用该网站所提供的功能,你可以查询出某网站背后是由哪些技术来支持的, 比如操作系统的类型.所采用的访问量统计服务.采用的发布平台.广告平台.语言框架.聚合功能. ...

  8. BZOJ 1112: [POI2008]砖块Klo

    1112: [POI2008]砖块Klo Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1736  Solved: 606[Submit][Statu ...

  9. 【matlab】设定C++编译器

    在用matlab2016a,运行的代码涉及到C++混编,要用mex把C++代码编译出来. 记得几年前的matlab版本,通过: mex -setup 就可以设定了,选择要使用的编译器(文本的超链接), ...

  10. 【BZOJ-4562】食物链 记忆化搜索（拓扑序 + DP）

    4562: [Haoi2016]食物链 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 133  Solved: 112[Submit][Status] ...