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

<!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. JavaScript中判断对象类型方法大全2

    在JavaScript中,有5种基本数据类型和1种复杂数据类型,基本数据类型有:Undefined, Null, Boolean, Number和String:复杂数据类型是Object,Object ...

  2. HDU1899 Sum the K-th's(树状数组)

    枚举,每次增加点,删除点 #include<cstdio> #include<iostream> #include<cstdlib> #include<cst ...

  3. Win7下的内置FTP组件的设置详解

    在局域网中共享文件,FTP是比较方便的方案之一.Win7内部集成了FTP,只是设置起来颇费一番功夫.着文以记之. 一.安装FTP组件 由于Win7默认没有安装FTP组件.故FTP的设置第一步就是安装F ...

  4. 攻城狮在路上（壹） Hibernate（十四）--- Hibernate的检索方式（下）

    本节介绍HQL和QBC的高级用法:各种连接查询.投影查询.报表查询.动态查询.集合过滤和子查询等.另外将归纳优化查询程序代码,从而提高查询性能的各种技巧.一.连接查询: HQL与QBC支持的各种连接类 ...

  5. php随机生成验证码

    我们经常需要服务器向前端发送验证码,验证码需要随机产生,下面的用简单的代码实现了这一过程: <?php $pool='0123456789abcdefghijklmnopqrstuvwxyzAB ...

  6. 解释一下SQLSERVER事务日志记录

    解释一下SQLSERVER事务日志记录 大家知道在完整恢复模式下,SQLSERVER会记录每个事务所做的操作,这些记录会存储在事务日志里,有些软件会利用事务日志来读取 操作记录恢复数据,例如:log ...

  7. maven项目Tomcat controller 404

    今天使用tomcat7.0.54启动现有的maven项目,可以正常启动,但是自己所写的所有的@controller注解的请求都报出了404的错误,在网上查了好久也很少找到这个问题,各种方法都尝试了也没 ...

  8. 学习iOS的网站

    ios开发者 http://www.codeios.com/   cocoachina http://www.cocoachina.com   code4app http://code4app.com ...

  9. hdu 3001(状压dp, 3进制）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3001 由于本题中一个点最多能够访问2次,由此可以联想到3进制; visited[i][j]表示在状态i ...

  10. r0遍历系统进程方法总结

    方法1: ZwQuerySystemInformation 这个方法网上一搜一大堆,不举例了 方法2:暴力枚举PID枚举进程,代码: NTSTATUS DriverEntry(PDRIVER_OBJE ...