您的位置：首页 > Web前端 > CSS

CSS+DIV两栏式全屏布局

2015-08-26 18:21 507 查看

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

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航