在网上找了很久，发现大部分都是固定宽度设置两栏，全屏情况下的布局很少。最后终于完成了，写出来备查，也供大家参考。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HTML>

<HEAD>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

    <TITLE>测试布局</TITLE>

    <script language="javascript" type="text/javascript" src="js/jquery-min.js"></script>

    <style type="text/css">

        <!--

        div{margin:0px;padding:0px;}

        /*基本信息*/

        body {font:12px Simsun;margin:0px;background:#FFF;color:#;}

        /*页面层容器*/

        #divContainer {width:%;clear:both;}

        /*页面头部*/

        #divHeader {clear:both;height:120px;background:#FFCC99;}

        /*页面主体*/

        #divMainContent {clear:both;height:400px;background:#CCFF00;position:relative;}

        #divLeftSidebar {width:200px;position:absolute; height:%;}

        #tbSpliter{width:8px;height:%;border:0px;border-collapse: collapse; background-image:url(images/pushPinBg.gif);}

        #divSidebarSpliter {margin-left:200px;width:8px;position:absolute; height:%;}

        #divRightContent {margin-left:208px;height:%;background:#EEE;}

        /*页面底部*/

        #divFooter {clear:both;height:25px;background:#00FFFF;}

        -->

    </style>

</head>

<body>

<div id="divContainer">

    <div id="divHeader">

        <iframe id="headFrame" name="headFrame" frameborder="no" scrolling="no" noresize="noresize"  src="Head.aspx" height="" width="100%"></iframe>

        <iframe id="topFrame" name="topFrame" frameborder="no" scrolling="no" noresize="noresize"  src="Top.aspx" height="" width="100%"></iframe>

    </div>

    <div id="divMainContent">

            <div id="divLeftSidebar">

                <iframe name="leftFrame" id="leftFrame" src="Left.aspx" scrolling="no" noresize="noresize" height="100%" width="100%" frameborder="" ></iframe>

            </div>

            <div id="divSidebarSpliter">

                <TABLE id="tbSpliter">

                    <TR><TD height="35%"></TD></TR>

                    <TR><TD><IMG id="imgSpliter" onclick="toggleDockPanel();" style="CURSOR:pointer" alt="" src="data:images/pushPinOpen.gif"></TD></TR>

                    <TR><TD height="55%"></TD></TR>

                </TABLE>

            </div>

            <div id="divRightContent">

                <iframe name="mainFrame" id="mainFrame" src="Main.aspx" scrolling="no" noresize="noresize" height="100%" width="100%" frameborder="" ></iframe>

            </div>

    </div>

    <div id="divFooter">

        <iframe src="Bottom.aspx" name="bottomFrame" frameborder="no" scrolling="no" noresize="noresize" width="100%" height="" ></iframe>

    </div>

</div>

<script type="text/javascript">

    $(document).ready(function () {

        self.moveTo(,);

        self.resizeTo(screen.availWidth,screen.availHeight);

        ResetDivContentHeight();

    })

    $(window).resize(ResetDivContentHeight);

    function ResetDivContentHeight() {

        $("#divMainContent").height($(window).height() - $("#divHeader").height()-$("#divFooter").height());

    }

    function toggleDockPanel(){

        if($("#divLeftSidebar").css("display")=="none"){

            $("#divLeftSidebar").show();

            $("#imgSpliter").attr("src",'images/pushPinOpen.gif');

            $("#divSidebarSpliter").css("margin-left",);

            $("#divRightContent").css("margin-left",);

        }else{

            $("#divLeftSidebar").hide();

            $("#imgSpliter").attr("src",'images/pushPinClose.gif');

            $("#divSidebarSpliter").css("margin-left",);

            $("#divRightContent").css("margin-left",);

        }

    }

</script>

</HTML>

CSS+DIV两栏式全屏布局的更多相关文章

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

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

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

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

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

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

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

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

  5. div两栏等高布局

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. css 关于两栏布局，左边固定，右边自适应

    好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...

  7. Android 沉浸式全屏

    Android 4.4 带来了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏. 虚拟按键动态隐藏, 应用可 以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种 “身临其境” 的体验. A ...

  8. jQuery10种不同动画效果的响应式全屏遮罩层

    遮罩层有很多今天介绍这个jQuery10种不同动画效果的响应式全屏遮罩层 效果预览 下载地址 实例代码 <div class="container"> <head ...

  9. iOS 全屏布局

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

随机推荐

  1. 5-06使用Sql 语句为表添加约束

    约束名的命名规则推荐采用:约束类型_约束列. 为用户表添加约束 ALTER TABLE UserInfo ADD CONSTRALNT PK_UserId PRIMATY REY(UserId) CO ...

  2. 应用程序调试工具gdb,王明学learn

    应用程序调试工具gdb学习使用 一.GDB简介 GDB 是 GNU 发布的一款功能强大的程序调试工具.GDB 主要完成下面三个方面的功能: 1.启动被调试程序. 2.让被调试的程序在指定的位置停住. ...

  3. ubuntu12.04 安装eclipse

    1:去官网下载最新版的eclipse for linux; 2:cd  /usr/local 用命令 sudo mkdir eclipse 建立一个Eclipse的目录 3:将下载的文件copy到ec ...

  4. barabasilab-networkScience学习笔记3-随机网络模型

    第一次接触复杂性科学是在一本叫think complexity的书上,Allen博士很好的讲述了数据结构与复杂性科学,barabasi是一个知名的复杂性网络科学家,barabasilab则是他所主导的 ...

  5. 【Tomcat】直接启动tomcat时为tomcat指定JDK 而不是读取环境变量中的配置

    在windows环境下以批处理文件方式启动tomcat,只要运行<CATALINA_HOME>/bin/startup.bat这个文件,就可以启动Tomcat.在启动时,startup.b ...

  6. loadrunner处理HTTP重定向请求

    //place this in global.h     int HttpRetCode;  int i=0;  char depthVal[10];  char cTransactName[2000 ...

  7. JAVA Day2

          标识符(类名:变量.属性.方法名: )      组成:类名开头不能是数字,只能有字母数字_$组成.         命名规范: 类名每一个单词首字母大写(HelloWorld大驼峰法则) ...

  8. POJ 3693 后缀数组

    题目链接:http://poj.org/problem?id=3693 题意:首先定义了一个字符串的重复度.即一个字符串由一个子串重复k次构成.那么最大的k即是该字符串的重复度.现在给定一个长度为n的 ...

  9. Codeforces Round #354 (Div. 2)-A

    A. Nicholas and Permutation 题目链接:http://codeforces.com/contest/676/problem/A Nicholas has an array a ...

  10. SU sunmo命令学习