CSS+DIV两栏式全屏布局

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

<!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:#000;} 
        /*页面层容器*/
        #divContainer {width:100%;clear:both;}
        /*页面头部*/
        #divHeader {clear:both;height:120px;background:#FFCC99;} 
        /*页面主体*/
        #divMainContent {clear:both;height:400px;background:#CCFF00;position:relative;}
        #divLeftSidebar {width:200px;position:absolute; height:100%;}
        #tbSpliter{width:8px;height:100%;border:0px;border-collapse: collapse; background-image:url(images/pushPinBg.gif);}
        #divSidebarSpliter {margin-left:200px;width:8px;position:absolute; height:100%;}
        #divRightContent {margin-left:208px;height:100%;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="92" width="100%"></iframe>
        <iframe id="topFrame" name="topFrame" frameborder="no" scrolling="no" noresize="noresize"  src="Top.aspx" height="28" 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="0" ></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="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="0" ></iframe>
            </div>
    </div> 
    <div id="divFooter"> 
        <iframe src="Bottom.aspx" name="bottomFrame" frameborder="no" scrolling="no" noresize="noresize" width="100%" height="24" ></iframe> 
    </div>   
</div>

<script type="text/javascript">
    $(document).ready(function () {
        self.moveTo(0,0);
        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",200);
            $("#divRightContent").css("margin-left",208);
        }else{
            $("#divLeftSidebar").hide();
            $("#imgSpliter").attr("src",'images/pushPinClose.gif');
            $("#divSidebarSpliter").css("margin-left",0);
            $("#divRightContent").css("margin-left",8);
        }
    }
    
</script>
</HTML>

 

posted @ 2015-08-26 18:21  coolsundy  阅读(1353)  评论(0)  编辑  收藏  举报