<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. SQL 常用函数及示例

    --SQL 基础-->常用函数 --================================== /* 一.函数的分类 SQL函数一般分为两种 单行函数 基于单行的处理,一行产生一个结果 ...

  2. [转]Servlet 3.0 新特性详解

    原文地址:http://blog.csdn.net/xiazdong/article/details/7208316 Servlet 3.0 新特性概览 1.Servlet.Filter.Listen ...

  3. kkt

  4. flex布局无法自动适应的bug以及实现textarea根据内容自适应

    -webkit-box布局无法自动适应高度的bug css3的新属性display:-webkit-box带来了前端开发自动适应布局的春天 ,但是我发现这个布局有个问题, 而且这个问题我无法解决: 描 ...

  5. mysql解决无法远程客户端连接

    1. 改表法.可能是你的帐号不允许从远程登陆,只能在localhost.这个时候只要在localhost的那台电脑,登入mysql后,更改 "mysql" 数据库里的 " ...

  6. Maven-搭建普通maven项目

    点击Eclipse菜单栏File->New->Ohter->Maven得到如下图所示对话框: 选中Maven Project并点击Next,到下一个对话框(默认)继续点击Next得到 ...

  7. C#-WebForm-★ 制作图片验证码 ★

    在前台放在如下四个控件 <div> <asp:TextBox ID="TextBox1" runat="server"></asp ...

  8. 控件（选择类）: ListBox, RadioButton, CheckBox, ToggleSwitch

    1.ListBox 的示例Controls/SelectionControl/ListBoxDemo.xaml <Page x:Class="Windows10.Controls.Se ...

  9. C++编译期多态与运行期多态

    前言 今日的C++不再是个单纯的"带类的C"语言,它已经发展成为一个多种次语言所组成的语言集合,其中泛型编程与基于它的STL是C++发展中最为出彩的那部分.在面向对象C++编程中, ...

  10. 【BZOJ-4386】Wycieczki DP + 矩阵乘法

    4386: [POI2015]Wycieczki Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 197  Solved: 49[Submit][Sta ...