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

<!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. android 入门-ID

    @+id/btn             //表示在R.java文件里面新增一个id为btn的控件索引,最常用的一种声明控件id的方式. @+android:id/list  //+android:表 ...

  2. WPF程序最小化到任务通知栏

    我们通常使用的桌面软件,都可以最小化到任务通知栏,并且可以从任务通知栏再打开当前软件,或者通过软件的快捷方式从任务通知栏呼出. 我们可以通过下面的方式把WPF程序最小化到任务栏.由于WPF并没有实现N ...

  3. hdu 5000 dp **

    题目中提到  It guarantees that the sum of T[i] in each test case is no more than 2000 and 1 <= T[i]. 加 ...

  4. hdu 4762 公式 java

    n/(n)^(m-1) import java.io.*; import java.math.*; import java.util.*; public class Main { static Big ...

  5. 求数组的长度 C

    对于数组array,计算其占用内存大小和元素个数的方法如下: C/C++ code ? 1 2 3 4 5 //计算占用内存大小 sizeof(array)   //计算数组元素个数 sizeof(a ...

  6. merge布局

    当LayoutInflater遇到这个标签时,它会跳过它,并将<merge />内的元素添加到<merge />的父元素里.迷惑了吗?让我们用<merge />来替 ...

  7. 【T_SQL】 基础 事务

    1.使用 T-SQL 语句来管理事务       开始事务:BEGIN TRANSACTION       提交事务:COMMIT TRANSACTION       回滚(撤销)事务:ROLLBAC ...

  8. Servlet3.0新特性

    1 Servlet3.0新特性概述 使用要求:MyEclipse10.0或以上版本,发布到Tomcat7.0或以上版本,创建JavaEE6.0应用! Servlete3.0的主要新特性如下三部分: 使 ...

  9. 遭遇OutOfMemoryError

    这几天,网店系统基础架构进行了一次大的升级,升级之后例行的进行了压力测试,以前几次大的项目发布压力测试都没有任何问题,没想到这次出事故啦,而且是内存泄露? 系统运行环境:硬件:Intel(R) Xeo ...

  10. DrawerLayout的使用

    一:首先是DrawerLayout的布局 <android.support.v4.widget.DrawerLayout android:id="@+id/drawer_layout& ...