DIV+CSS实现FRAMESET效果

一、Main.htm页面代码及其样式代码：

 

1.Main.htm页面代码

<! 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 >
< title > 后台管理系统 </ title >
< link href ="Styles/frame.css" rel ="Stylesheet" type ="text/css" />
< link href ="Styles/menu.css" rel ="Stylesheet" type ="text/css" />
< style type ="text/css" >
body
{
margin : 0 ;
padding : 0 ;
border : 0 ;
overflow : hidden ;
height : 100% ;
max-height : 100% ;
}
</ style >

< script language ="javascript" type ="text/javascript" >
function SetWinHeight(obj)
{
var win = obj;
if (document.getElementById)
{
if (win && ! window.opera)
{
if (win.contentDocument && win.contentDocument.body.offsetHeight)
win.height = win.contentDocument.body.offsetHeight;
else if (win.Document && win.Document.body.scrollHeight)
win.height = win.Document.body.scrollHeight;
}
}
}
</ script >

</ head >
< body >
< form id ="form1" runat ="server" >
< div id ="framecontentLeft" >
< div class ="menu" >
< ul >
< li >< a href ="CategoryList.htm" target ="content" > 产品类别 </ a ></ li >
< li >< a href ="ProductList.htm" target ="content" > 产品明细 </ a ></ li >
</ ul >
</ div >
</ div >
< div id ="framecontentTop" >
< div style ="text-align: center;" >
< div style ="float: right;" >
< a href ="Default.aspx?act=logout" > 退出 </ a >
</ div >
< h1 >
后台管理系统
</ h1 >
</ div >
</ div >
< div id ="maincontent" >
< iframe id ="content" name ="content" onload ="Javascript:SetWinHeight(this)" frameborder ="0"
scrolling ="no" width ="100%" ></ iframe >
</ div >
</ form >
</ body >
</ html >

 

2.frame.css样式代码

#framecontentTop
{
position : absolute ;
top : 0 ;
left : 0 ;
height : 100px ;
width : 100% ;
overflow : hidden ;
vertical-align : middle ;
background-color : #D2E6FA ;
}

#framecontentLeft
{
position : fixed ;
top : 100px ;
left : 0 ;
height : 100% ;
width : 150px ;
overflow : hidden ;
vertical-align : top ;
background-color : #D2E6FA ;
}

#maincontent
{
position : fixed ;
left : 150px ; /* Set left value to WidthOfLeftFrameDiv */
top : 100px ; /* Set top value to HeightOfTopFrameDiv */
right : 0 ;
bottom : 0 ;
overflow : auto ;
background : #fff ;
border-top : solid 2px #70cbea ;
border-left : solid 2px #70cbea ;
}
* html body
{
padding : 100px 0 0 150px ; /* Set value to (HeightOfTopFrameDiv 0 0 WidthOfLeftFrameDiv) */
}
* html #maincontent
{
height : 100% ;
width : 100% ;
}
* html #framecontentTop
{
width : 100% ;
}

 

3.menu.css样式代码

.menus
{
}
.menu ul
{
padding : 0 ;
margin : 0 ;
list-style-type : none ;
width : 100% ;
}
.menu li
{
position : relative ;
background : #d4d8bd ;
height : 26px ;
}
.menu a, .menu a:visited
{
display : block ;
text-decoration : none ;
height : 25px ;
line-height : 25px ;
width : 149px ;
color : #000 ;
text-indent : 5px ;
border : 1px solid #fff ;
border-width : 0 1px 1px 0 ;
}
.menu a:hover
{
color : #fff ;
background : #949e7c ;
}

 

二、CategoryList.htm页面代码（根据自己需要输入）：

 

代码

<! 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 >
< title > 类别列表 </ title >
</ head >
< body >
< div >
< table >
< tr >
< td > 类别 </ td >
< td > 类别 </ td >
< td > 类别 </ td >
< tr >
< tr >
< td > 类别 </ td >
< td > 类别 </ td >
< td > 类别 </ td >
< tr >
< tr >
< td > 类别 </ td >
< td > 类别 </ td >
< td > 类别 </ td >
< tr >
</ table >
</ div >
</ body >
</ html >

 

三、ProductList.htm页面代码（根据自己需要输入）：

 

代码

<! 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 >
< title > 类别列表 </ title >
</ head >
< body >
< div >
< table style ="height:500px;" >
< tr >
< td > 产品 </ td >
< td > 产品 </ td >
< td > 产品 </ td >
< tr >
< tr >
< td > 产品 </ td >
< td > 产品 </ td >
< td > 产品 </ td >
< tr >
< tr >
< td > 产品 </ td >
< td > 产品 </ td >
< td > 产品 </ td >
< tr >
</ table >
< table style ="height:500px;" >
< tr >
< td > 产品 </ td >
< td > 产品 </ td >
< td > 产品 </ td >
< tr >
< tr >
< td > 产品 </ td >
< td > 产品 </ td >
< td > 产品 </ td >
< tr >
< tr >
< td > 产品 </ td >
< td > 产品 </ td >
< td > 产品 </ td >
< tr >
</ table >
</ div >
</ body >
</ html >

 

四、效果图：

（图一）

（图二）

转载于:https://www.cnblogs.com/weihengblogs/archive/2012/10/26/2740904.html