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

<!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. 构造方法 static 块 {}块 执行顺序

    package com.test.innerclass; public class HelloB extends HelloA { public HelloB() { System.out.print ...

  2. B树算法与实现 （C语言实现）

    B树的定义 假设B树的度为t(t>=2),则B树满足如下要求:(参考算法导论) (1)  每个非根节点至少包含t-1个关键字,t个指向子节点的指针:至多包含2t-1个关键字,2t个指向子女的指针 ...

  3. Grafana 安装

    由于 Grafana 是存静态的,你只需要下载源代码解压,将它部署在 Nginx 上面就可以了,或者可以用 Python 的 SimpleHTTPServer 来跑 $ wget http://gra ...

  4. fis3-postpackager-loader插件说明

    fis3-postpackager-loader 静态资源前端加载器,用来分析页面中使用的和依赖的资源(js或css), 并将这些资源做一定的优化后插入页面中.如把零散的文件合并. 注意 此插件做前端 ...

  5. impdp导入job

    结论: 10g to 10g:整个用户导出,无法正常导入JOB 10g to 11g:impdp时加SCHEMAS参数会导致无法正常导入JOB 11g to 11g:可以正常导入JOB 参见:http ...

  6. Python 遍历文件，字符串操作

    写一个简单的脚本,循环遍历单层文件夹,检查源代码中是否有一些特殊的类. import os import codecs dirroot = "......" line_num = ...

  7. 免费电子书：Azure Web Apps开发者入门

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:之前介绍过微软正在逐步出版一个名为Azure Essential的入门系列教程,最近刚 ...

  8. VS2010 打开 VS2012 的项目

    用 VS2010 打开 VS2012 项目,只需两步. 1. 修改解决方案文件(*.sln) 使用记事本打开 *.sln 文件,将里面的 Microsoft Visual Studio Solutio ...

  9. memset中的sizeof

    记录memset中的sizeof的用法, unsigned char *buff = (unsigned char*) malloc(128 * sizeof(char)); //错误的:memset ...

  10. Codeforces Round #369 (Div. 2) C. Coloring Trees DP

    C. Coloring Trees   ZS the Coder and Chris the Baboon has arrived at Udayland! They walked in the pa ...