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

<!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. ShooterGame 学习笔记1 PlayerPawn的两个Mesh的可见性

    GameMode Override 为 ShooterGame_TeamDeathMatch GameMode中设置的Default Pawn Class 为 PlayerPawn , PlayerP ...

  2. go sample-base64

    GoSample-base64 package mainimport ( "encoding/base64" "fmt")func base64Encode(s ...

  3. 信号量互斥,王明学learn

    信号量互斥 信号量(又名:信号灯)与其他进程间通信方式不大相同,主要用途是保护临界资源(进程互斥).进程可以根据它判定是否能够访问某些共享资源.除了用于访问控制外,还可用于进程同步. 一.信号量分类 ...

  4. CG&CAD resource

    Computational Geometry The Geometry Center (UIUC) Computational Geometry Pages (UIUC) Geometry in Ac ...

  5. Codeforces Round #174 (Div. 1) B. Cow Program(dp + 记忆化)

    题目链接:http://codeforces.com/contest/283/problem/B 思路: dp[now][flag]表示现在在位置now,flag表示是接下来要做的步骤,然后根据题意记 ...

  6. 【SSH】 之 Struts2

    (一)Struts2是什么? Struts2是一个基于MVC设计模式的Web应用框架,它本质上相当于一个servlet,在MVC设计模式中,Struts2作为控制器(Controller)来建立模型与 ...

  7. bzoj专题训练

    //http://blog.csdn.net/PoPoQQQ/article/category/2542243

  8. Loadrunner中参数化实战（7）-Unique+Each iteration

    参数化数据30条: 脚本如下,演示登录,投资,退出操作是,打印手机号: 首先验证Vugen中迭代: Unique+Each iteration 设置迭代4次Action 结果如下:

  9. 分享Kali Linux 2016.2第47周虚拟机

    分享Kali Linux 2016.2第47周虚拟机该虚拟机使用Kali Linux 2016.2第47周的64位镜像安装而成.基本设置如下:(1)该系统默认设置单CPU双核,内存为2GB,硬盘为50 ...

  10. zepto下加载openbox弹出层

    function fnOpenBox(objId,animateD,speed,tween,hide){ var oOpenBox = $(objId); oOpenBox.show(); oOpen ...