<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. 提高你的数据库编程效率：Microsoft CLR Via Sql Server

    你还在为数据库编程而抓狂吗?那些恶心的脚本拼接,低效的脚本调试的日子将会与我们越来越远啦.现在我们能用支持.NET的语言来开发数据库中的对象,如:存储过程,函数,触发器,集合函数已及复杂的类型.看到这 ...

  2. 100114C

    打表找规律 第25项开始循环 #include<iostream> #include<cstdio> #include<algorithm> using names ...

  3. C# 图片超过指定大小将压缩到指定大小不失真

    using System;using System.Collections.Generic;using System.Drawing;using System.Drawing.Drawing2D;us ...

  4. 【LintCode】计算两个数的交集（一）

    问题分析: 既然返回值没有重复,我们不妨将结果放进set中,然后对两个set进行比较. 问题求解: public class Solution { /** * @param nums1 an inte ...

  5. R 绘图 填充颜色

    d <- density(mtcars$mpg) plot(d, main="Kernel Density of Miles Per Gallon") polygon(d, ...

  6. C++之再续前缘（一）——C++基础（与C语言的差异）（下）

    1.void型指针 void本身是一种数据类型,通常表示无值,不能声明void类型的变量,但是可以声明void类型的指针, void*类型的指针表示不确定的类型,是一种通用型的指针,也就是说任何类型的 ...

  7. Python 素数判断；以及默尼森数

    1. 素数/质数 只能被2或者本身整除的正整数. 2. 默尼森数 P是素数且M也是素数,并且满足等式M=2^P-1,则称M为默尼森数. 编程小要求: 输出前5个默尼森数 1)最外层循环找素数 中间层循 ...

  8. 【bzoj3884】 上帝与集合的正确用法

    http://www.lydsy.com/JudgeOnline/problem.php?id=3884 (题目链接) 题意 求 Solution 解决的关键: 当${n>φ(p)}$,有$${ ...

  9. 订阅Jenkins的邮件列表，获取最新的信息

    进入https://jenkins.io/content/mailing-lists/ 点击感兴趣的话题 选择[archive]跳转到谷歌讨论组 最后,点击左上角的[Subscribe]即可加入Goo ...

  10. Android成长日记-ListView

    数据适配器:把复杂的数据(数组,链表,数据库,集合等)填充在指定的视图界面上 适配器的类型: ① ArrayAdapter(数组适配器):用于绑定格式单一的数据 数据源:可以是集合或数组 ① Simp ...