iframe分栏窗口实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>后台管理系统</title>
<link rel="stylesheet" type="text/css" href="css/base.css"/>
<link rel="stylesheet" type="text/css" href="css/workspace.css"/>
<style>
.navPoint {
color:white;
cursor:hand;
font-size:12px;
font-family:"微软雅黑", "黑体";
}
</style>
<script type="text/javascript">
var flag=true;
function switchSysBar(){
if (flag){
document.all("img1").src="images/l.png";
document.all("frmTitle").style.display="none" ;
flag=false;
} else {
document.all("img1").src="images/l.png";
document.all("frmTitle").style.display="" ;
flag=true;
}
}
function changeMenu(id,url,pId){
$("li").each(function(i){
if(id=="menu"+(i+1)){
$(this).attr("class","fl on");
location.href="/back/selectPurview.action?id="+pId;
}else{
$(this).attr("class","fl");
}
});
}
//退出
function goToExit(){
window.location.href="/backLogin/goToExit.action";
}
</script>
</head>
<body style="overflow:scroll;">
<div class="top" style="height:85px;">
<div class="current fr" style="width:220px;white-space:nowrap;margin-top: 5px;">
当前用户：<font color="#ff5200">llj</font>
[<a href="javascript:goToExit();">退出登录 </a>]
</div>
<div class="nav fl" style="margin-top:30px;margin-left:5px;width:100%;">
<ul>
<li class="fl onfl" id="menu1">
<a class="navSelf" href="javascript:changeMenu('menu1','left.jsp','2')">系统管理</a>
</li>
<li class="fl on" id="menu2">
<a class="navSelf" href="javascript:changeMenu('menu2','left.jsp','309')">财政操作管理</a>
</li>
<li class="fl" id="menu3">
<a class="navSelf" href="javascript:changeMenu('menu3','left.jsp','88')">新闻内容管理</a>
</li>
<li class="fl" id="menu4">
<a class="navSelf" href="javascript:changeMenu('menu4','left.jsp','333')">电商运营管理</a>
</li>
</ul>
</div>
</div>
<div class="line"></div>
<table border="0" cellpadding="0" cellspacing="0" style=" width:100%; table-layout:fixed;">
<tr>
<td width="180" id="frmTitle" noWrap name="fmTitle" align="center" valign="top">
<iframe name="leftFrame" height="800" width="180" src="left.jsp" border="0" frameborder="0" scrolling="no"></iframe>
</td>
<td width="8" height="800" valign="middle" background="/main_12.gif" οnclick="switchSysBar()">
<span class="navPoint"><img src="images/l.png" name="img1" width=8 height=52 id=img1 /></span>
</td>
<td valign="top" height="800">
<iframe height="800" οnlοad='this.style.height=Math.max(this.contentWindow.document.body.scrollHeight,this.contentWindow.document.documentElement.scrollHeight,200)+"px";' name="mainFrame" height="100%" width="100%" src="main.jsp" border="0" frameborder="0" scrolling="yes"></iframe>
</td>
</tr>
</table>
</body>
</html>
==========================
css1：
@charset "UTF-8";
/*css 初始化 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
margin: 0;
padding: 0;
}
fieldset, img, input, button { /*fieldset组合表单中的相关元素*/
border: none;
padding: 0;
margin: 0;
outline-style: none;
}
ul, ol {
list-style: none; /*清除列表风格*/
}
input {
padding-top: 0;
padding-bottom: 0;
font-family: "SimSun", "宋体";
}
select, input {
vertical-align: middle;
}
select, input, textarea {
font-size: 12px;
margin: 0;
}
textarea {
resize: none;
}
/*防止多行文本框拖动*/
img {
border: 0;
vertical-align: middle;
}
/* 去掉图片低测默认的3像素空白缝隙*/
table {
border-collapse: collapse; /*合并外边线*/
}
body {
font: 12px/150% Arial, Verdana, "\5b8b\4f53"; /*宋体，Unicode，统一码*/
color: #666;
background: #fff
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /*IE/7/6*/
}
a {
color: #666;
text-decoration: none;
}
/* a:hover {
color: #C81623;
} */
h1, h2, h3, h4, h5, h6 {
text-decoration: none;
font-weight: normal;
font-size: 100%;
}
s, i, em {
font-style: normal;
text-decoration: none;
}
/* .col-red {
color: #C81623 !important;
} */
/*公共类*/
.w,.main-content{
/*版心 提取 */
width: 1200px;
margin: 0 auto;
}
.fl {
float: left;
}
.fr {
float: right
}
.al {
text-align: left
}
.tc{
text-align: center;
}
.ar {
text-align: right
}
.hide {
display: none
}
.noborder {
border: none;
}
.fs12{
font-size: 12px;
}
.fs14{
font-size: 14px;
}
.fs22{
font-size: 22px;
}
.fs30{
font-size: 30px;
}
.fs20{
font-size: 20px;
}
.color-red{
color: #ff3000;
}
.color-666{
color: #666 !important;
}
.color-yellow{
color: #fede03;
}
.color-black{
color: #000;
}
.color-brown{
color: #4b3401;
}
.pr{
position: relative;
}
.pa{
position: absolute;
}
.mt-15{margin-top: 15px}
css2：
@charset "utf-8";
/* CSS Document */
.code{width:100%;height:auto;}
.top{height:66px;width:100%;background:url(../images/workspace/tup.jpg) no-repeat top right #3d87c6;}
.line{width:100%;height:6px;border-top:1px solid #3777ae;border-bottom:1px solid #fff; background:#5fa6e2;overflow:hidden;}
.nav{width:auto;height:34px; margin-top:32px; margin-left:96px;}
.nav ul{height:34px; display:inline;}
.nav ul li{padding-left:9px; overflow:hidden;display:block;}
.nav ul li,.nav ul li a,.nav ul li.on,.nav ul li.no a{height:34px;font-size:14px; font-family:"微软雅黑"; font-weight:900; color:#fff; background:url(../images/workspace/nav.jpg);}
.nav ul li a{background-position: right top;padding:0px 15px 0 7px;line-height:38px;display:block;float:left;}
.nav ul li.on{background-position:0 -34px;}
.nav ul li.on a{background-position:right -34px;color:#367abb;}
.current{color:#fff; margin:10px 15px 0 0; display:inline;}
.current a{color:#fff;}
.current a:hover{ text-decoration:underline;}
/*main==============================================================================================*/
.main{ width:100%;height:auto;}
.mainLeft{width:172px;height:auto; background:#c5c5c5;}
.leftNavCode{width:172px;height:auto; background:#eee;}
.menuitem{height:40px; background:#eee;position:relative;border-top:1px solid #fff; border-bottom:1px solid #d6d6d6;}
.imgCode{margin-left:15px; display:inline; margin-top:10px;}
.TextIcon{height:20px;float:left; margin:5px 0 0 12px; line-height:33px;}
.leftNav{padding-bottom:10px; background:#f8f8f8;border-bottom:1px solid #d5d3d3;}
.leftNav ul{padding-top:10px;}
.leftNav ul li{height:28px;line-height:28px;}
.leftNav ul li a{ no-repeat;padding-left:25px; height:13px;color:#666; display:block;height:28px; width:147px;float:left;}
.leftNav ul li a span{background:url(../images/workspace/jiao1.jpg);height:28px;width:6px; margin-right:12px;}
.leftNav ul li a:hover{color:#3590d0; background: #e5e4e4;}
.leftNav ul li a:hover span{background:url(../images/workspace/jiao.jpg) no-repeat; }
.shrink{ width:8px;height:720px; background:#c5c5c5;}
.shrink span.open{width:8px;height:200px; background:url(../images/workspace/san.jpg) no-repeat left bottom; display:block; cursor:pointer;}
.left_menu_on {width: 10px;padding: 0;}
.mainRight{width:auto;height:700px;background:url(../images/workspace/bg.jpg);padding:10px 20px;}
.ThreeNavigation{width:204px;height:500px;border-radius:5px;box-shadow:1px 2px 3px #ccc; background:#f7f7f7;behavior:url(../js/PIE.htc); position:relative; margin-right:10px;}
.codeTop{border-radius:5px 5px 0 0;behavior:url(../js/PIE.htc);height:30px; background:#e6e7e8;_margin:3px 0 0 3px; line-height:30px; padding-left:15px; font-weight:900;color:#666;}
.ThreeContent{padding:12px;}
.rightTable{border-radius:5px; box-shadow:1px 2px 3px #ccc; background:#f7f7f7; width:auto;height:auto;behavior:url(../js/PIE.htc); position:relative;}
.tableCodeTop{width:auto;height:30px; background:#e4e5e6; border-radius:5px 5px 0 0;behavior:url(../js/PIE.htc);_margin:3px 0 0 3px; line-height:30px; padding-left:15px; font-weight:900;color:#666;}
.tableMain{width:auto;height:auto; padding:15px;}