<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. ES6新特性：Javascript中Set和WeakSet类型的数据结构

    ES6提供了新的数据结构Set,Set对象不是数组, 可以用来保存对象或者基本类型, 所有保存的值都是唯一的, chrome浏览器>38和FF>13,以及nodeJS,对Set支持良好, ...

  2. java学习笔记--java中的基本数组[5]

    java基础很重要, 今天呆家看java视频,顺便总结前几周看的java书籍,做一下简单的总结:1:数组的声明,2:数组的赋值: 3:数组的方法: 声明一个数组主要有两种方式: //类型 []数组名字 ...

  3. VS2013无法启动IIS Express Web的解决办法

    关于 ASP.NET Web 开发服务器.本地 IIS和 IIS Express 的区别,请参见<VS2013无法启动IIS Express Web的解决办法>, 此文章最后提到的部分,即 ...

  4. SQL server 中的@，@@、#，##分别代表什么？

    @声明变量,@@系统函数,#本地临时表,##全局临时 表    

  5. perl 变量 $/ 的用法解析

    默认状态下,很显然都是用\n来区分行,\n也被我们称作为换行符.当读取序列时,按行来读取时,就是以换行符为标准. perl中"行"的概念就由$/决定. { $data = &quo ...

  6. static关键字总结

      static,即静态声明.它在 作用域.存储方式.生命周期 等各方面影响一个变量或函数.文章将从 局部变量.全局变量.普通函数.类的static成员(包括数据成员与成员函数)来总结static. ...

  7. HTML 事件处理

    1.HTML事件处理程序 2.DOM0级事件处理程序 3.DOM2级事件处理程序 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transi ...

  8. 【bzoj3110】 Zjoi2013—K大数查询

    http://www.lydsy.com/JudgeOnline/problem.php?id=3110 (题目链接) 题意 有N个位置,M个操作.操作有两种,每次操作如果是1 a b c的形式表示在 ...

  9. Jquery实现滚动到底部加载更多（最原始）

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  10. Nuget包里的依赖包更新到最新版本会不会随主包回滚到旧包的研究

    A包中有几个依赖包:A-1包,版本:>=1.0:但是我项目上已经引用了A-1包的2.0版本,那么我添加A包的时候,不会将A-1包2.0版本改成1.0版本,会直接用2.0版本的.