为什么要用Div Css可以简单的作如下解释：
DIV CSS 布局定位 实例 菜单导航 详解
1、基本框架搭建
<div class="header"></div> <div id=toolAndContent></div>
<div class="header">
<div class="padder">
<div class="nav">
<div class="navLaftBg">
<div class="navRightBg">
<!-- 左侧菜单时打开 -->
<div id=headTitle>
<DIV style="DISPLAY: none" id=blk1 class=blk>
<DIV class=sList id=close1>
<UL>
<LI><A href="#" onclick='switchRole("1", "Management Subsystem")'>Management Subsystem</A> </LI>
<LI><A href="#" onclick='switchRole("3", "User Subsystem")'>User Subsystem</A> </LI> <LI><A href="#" onclick='switchRole("8", "Device Subsystem")'>Device Subsystem</A> </LI>
<LI><A href="#" onclick='switchRole("20", "Task Subsystem")'>Task Subsystem</A> </LI> </UL>
</DIV>
</DIV>
<a href="#" onclick="javascript:document.location='jumpToMain.do?cmd=selectSystem';" id="n-9">Switch System</a>
<a href="#" id="n-7" onclick="doLogout();"> LogOff </a><!--注 销 -->
<a href="#" id="n-6" onclick="doLogoff();"> LogOut </a><!-- 安全退出 -->
</div>
<div id=hederTimag><img src="css/title.png" height="28px" width="500px"/> </div>
<div class="mainNav" style="display: none"><!-- 左侧菜单时以下隐藏,这里是菜单在头部时的输出 -->
<a href="#" onclick="hideToolBar();" id="n-3">Switch System</a>
<a href="#" id="n-1" onclick="doLogout();"> LogOff </a><!--注 销 -->
<a href="#" id="n-2" onclick="doLogoff();"> LogOut </a><!-- 安全退出 -->
</div>
</div>
</div>
</div>
<div class="secondNav" style="display: none">
<div id="subNav1" style="display: none;padding-left:50px;">
<a href="javascript:void(0);" onclick='javascript:modifyPasswd();' class="actived">
Change Password
</a>
<a href="javascript:void(0);" onclick='javascript:openWindow("personalInfo.do?actionRelatMenuId=104",680, 450, "users");' class="actived">
Edit Profile
</a>
</div>
<div id="subNav-3" style="display:none;padding-left:300px;">
<a href="#" onclick='switchRole("1", "Management Subsystem")' class="actived">Management Subsystem</a>
<a href="#" onclick='switchRole("3", "User Subsystem")' class="actived">User Subsystem</a>
<a href="#" onclick='switchRole("8", "Device Subsystem")' class="actived">Device Subsystem</a>
<a href="#" onclick='switchRole("20", "Task Subsystem")' class="actived">Task Subsystem</a>
<a href="#" onclick='switchRole("21", "Msg Subsystem")' class="actived">Msg Subsystem</a>
</div>
<div id="subNav-1" style="display:none;padding-left:300px;">
<a href="#" onclick="doLogout();" class="actived"><!-- 退出当前用户,并转到登录页面！ -->Exit the current user, and then move on to login page!</a>
</div>
<div id="subNav-2" style="display:none;padding-left:350px;">
<a href="#" onclick="doLogoff();" class="actived"><!-- 退出当前用户,并关闭页面！ -->Exit the current user, and shut down the page!</a>
</div>
</div>
</div>
</div>
<div id=toolAndContent onclick="switchMenuTool(); event.cancelBubble = true;">
<div id=menuTool>
<div id=menuSystem>
</div>
<div class="mainMenu" id="m1" onclick="showSecondMenu('m1',2);event.cancelBubble = true;"><!-- 一级菜单 -->
Personal Settings
</div>
<div class="secMenu" id="m1-0"><!-- 二级菜单 -->
<a href="#" onclick='javascript:modifyPasswd();event.cancelBubble = true;'> Change Password</a>
</div>
<div class="secMenu" id="m1-1"><!-- 二级菜单 -->
<a href="#" onclick='javascript:openWindow("personalInfo.do?actionRelatMenuId=104",680, 450, "users");event.cancelBubble = true;'> Edit Profile</a>
</div>
</div>
<div id="middleTool" onclick="switchMenuTool(); event.cancelBubble = true;">
<img id=leftBar src="css/pic23.gif" width="9" height="90" alt="向左打开" border="0" />
<img id=rightBar src="css/pic24.gif" width="9" height="90" alt="向右打开" border="0" style="display:none" />
</div>
<div id="contentDiv" onclick="switchMenuTool(); event.cancelBubble = true ;">
<iframe id=mainFrame name="mainFrame" src="http://www.baidu.com" class="mainFramCssMin"></iframe>
</div>
</div>
2、布局控制
按照上面的组合，我们期望得到一个如下图的布局
/*左侧菜单样式*/
#toolAndContent{
position:absolute;left:1px;top:30px;
min-width: 730px;min-height:600px;background-color:#F0F9FE;
width: expression(document.body.clientWidth < 1010? "1010px": "99.5%" )/*最小宽度设置*/;height:expression(document.body.clientHeight -30 +"px");
}
#menuTool{
float:left;width:240px;margin-right:-2;
}
#middleTool{
float: left;
margin-right:-3;margin-top:150px;cursor:hand;
}
#contentDiv{
position:absolute;top:0px;height:100%;
border-color:blue;background-color:#F0F9FE;cursor: hand;
}
这里对身子(toolAndContent)进行了绝对定位，以保证身子在头的下面，菜单栏(menuTool)和工具栏(middleTool)都使用了相对定位，左跟随的设置。而对右侧的内容(contentDiv)使用了绝对定位。
3、Div + iframe + Css 控制剩余高度
.mainFramCssMin{
min-width:730px;height: 100%;
width: expression(document.body.clientWidth < 730 ? "730px": (document.body.clientWidth -245 +"px") );
/**width: expression(document.body.clientWidth < 730 ? "730px": "100%" )**/
/*最小宽度设置*/;
}
.mainFramCssMax{
min-width:730px;height: 100%;
width: expression(document.body.clientWidth < 730 ? "730px": (document.body.clientWidth -5 +"px") );
/**width: expression(document.body.clientWidth < 730 ? "730px": "100%" )**/
/*最小宽度设置*/;
}
var tType = 1;
function switchMenuTool(){
if(tType == '1'){
$("#leftBar").hide();
$("#menuTool").hide(500);
$("#mainFrame").attr("class","mainFramCssMax");
$("#rightBar").show();
tType = 2;
}else{
$("#rightBar").hide();
$("#menuTool").show(300);
$("#mainFrame").attr("class","mainFramCssMin");
$("#leftBar").show();
tType = 1;
}
}
完整的页面效果：
