<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. 9.29判断变量x是奇数还是偶数

    方法一: package qqq; public class Jiou { public static void main(String[] args) { // TODO Auto-generate ...

  2. Listview的onItemClickListener无法响应的解决方法（转）

    转:http://www.cnblogs.com/androidez/archive/2013/03/08/2950425.html 开发中很常见的一个问题,项目中的listview不仅仅是简单的文字 ...

  3. js-函数eval

    eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句.如果s语句执行结果是一个值,则返回此值,否则返回undefined. 需要特别注意的是对象声明语法“{}”并不能返回一个值, ...

  4. Eclipse中使用SVN

    1.在Eclipse里下载Subclipse插件   方法一:从Eclipse Marketplace里面下载 具体操作:打开Eclipse --> Help --> Eclipse Ma ...

  5. awk同时处理多个文件

    关于awk的多文件处理: awk的数据输入有两个来源,标准输入和文件,后一种方式支持多个文件,如1.shell的Pathname Expansion方式:awk '{...}' *.txt # *.t ...

  6. 【HDU 4445】Crazy Tank（暴力）

    高中物理斜抛运动,简单分析一下角度固定下来则可以计算每个cannonball的降落坐标lnd. 因此暴力计算不同角度下的结果. #include <cstdio> #include &qu ...

  7. IOS-App installation failed原因及解决方法

    在用真机调试的时候,每次运行app都会弹出这个框,点击ok后,再次运行就没问题了.刚开始觉得没什么,无非就是多点几次,到后来,觉得这也很浪费时间,严重影响开发效率,在网上搜索了一遍后,决定将解决方案写 ...

  8. jquery插件-表单验证插件-提示信息中文化与定制提示信息

    接上一篇 2)messages 提示:修改默认的提示信息最简单的方法是引入message_zh.js文件即可! 如果需要在validate()方法内提示则可以使用本选项 类型:Object 说明:自定 ...

  9. fzuoop期中练习

    5-1 科学计数法的值 科学计数法是一种数学专用术语.将一个数表示成 a×10的n次幂的形式,其中1≤|a|<10,n为整数,这种记数方法叫科学计数法.例如920000可以表示为9.2*10^5 ...

  10. django redirect的几种方式

    You can use the redirect() function in a number of ways. By passing some object; that object’s get_a ...