一个CSS+div高度自适应布局模型

zoukankan html css js c++ java

一个CSS+div高度自适应布局模型

近日查看了一些资料自己研究写了一个网站布局，采用高度自适应，css样式表如下： * { margin:0; padding:0; } 　BODY { font-size: 12px; font-family: "Verdana" , "Arial" , "细明体" , "sans-serif"; text-align: center; background-image: url(../images/bg.gif); } table { FONT-SIZE: 12px; FONT-FAMILY: "Verdana", "Arial", "细明体", "sans-serif"; } /*空行*/ .space10{ height:10px; float:left; 100%; } /*实现自适应高度的层*/ .autoaddheight{ font: 0px/0px sans-serif; clear: both; display: block; } /*顶部小菜单样式*/ #topDiv{ height:100px; 930px; margin-left:auto; margin-right:auto; border:3px solid gray; } /*主菜单样式*/ #MenuDiv { float:inherit; 930px; background:#E3ECF3; line-height:normal; margin-left:auto; margin-right:auto; font: bold 14px/1.5em Verdana; height:40px; border:3px solid black; } #outer { margin-top: 0px; padding-left: 1px; margin-bottom: 0px; 95%; } #MenuDiv li{ /*子选择器,定义列表的样式*/ } /*网页左边框架样式*/ #leftContent { float: left; 220px; text-align: left; border-right: #ccccff thin solid; border-top: #ccccff thin solid; border-left: #ccccff thin solid; border-bottom: #ccccff thin solid; } /*中部框架层*/ #center { 930px; float: none; clear: both; margin: auto; border-right: #330066 2px solid; border-top: #330066 2px solid; border-left: #330066 2px solid; border-bottom: #330066 2px solid; background-color: #ffffff; } /*右边主层*/ #rightbody { 702px; float: left; text-align: center; margin: 0px; border-right: #ccccff thin solid; border-top: #ccccff thin solid; border-left: #ccccff thin solid; border-bottom: #ccccff thin solid; } /*底部样式*/ #bottom{ 930px; margin-left:auto; margin-right:auto; height:40px; border:3px solid gray; } .Search { border-right: #ccccff thin solid; border-top: #ccccff thin solid; border-left: #ccccff thin solid; border-bottom: #ccccff thin solid; } .tree { background-color: #ffffff; } 网页代码如下： <%@ Master Language="C#" AutoEventWireup="true" CodeFile="PageMaster.master.cs" Inherits="PageTemplate_PageMaster" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" > <head runat="server"> <title>无标题页</title> <link rel = "stylesheet" rev ="stylesheet" href ="../css/site.css" type="text/css" /> </head> <body> <form id="form1" runat="server"> <div id = "outer"> <div id="header"> <div style="padding-left: 20px; padding-top:10px; 257px; height: 50px;float:left"> <b style="font-size:18pt; color: #ffffff;"><%=FrameName %></b><br /> <font size="2" color="#ffffff" face="Verdana, Arial, Helvetica, sans-serif"> <%=FrameNameVer %> </font> </div> <div style="margin-left: 48%; height: 20px; margin-top: 35px;"> <table width = "100%" height ="100%" class="Search"> <tr> <td style=" 1436px" > 文件标题</td> <td style=" 1116px" ><asp:TextBox ID="TextBox3" runat="server" Width="213px"></asp:TextBox> </td> <td style=" 127px"> <asp:Button ID="Button2" runat="server" Text="搜索" />  </td> <td> <asp:Button ID="Button1" runat="server" Text="高级搜索" /></td> <td></td> </tr> </table> </div> </div> <div id="center"> <div id="leftContent"> <table width ="100%" height = "100%"> <tr> <td> </td> </tr> <tr> <td class = "tree"> <asp:TreeView ID="TreeView1" runat="server" ImageSet="Arrows"> <ParentNodeStyle Font-Bold="False" /> <HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" /> <SelectedNodeStyle Font-Underline="True" ForeColor="#5555DD" HorizontalPadding="0px" VerticalPadding="0px" /> <Nodes> <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode> <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode> <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode> <asp:TreeNode Text="新建节点" Value="新建节点"> <asp:TreeNode Text="新建节点" Value="新建节点"> <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode> </asp:TreeNode> </asp:TreeNode> <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode> <asp:TreeNode Text="新建节点" Value="新建节点"> <asp:TreeNode Text="新建节点" Value="新建节点"> <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode> </asp:TreeNode> </asp:TreeNode> <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode> <asp:TreeNode Text="新建节点" Value="新建节点"> <asp:TreeNode Text="新建节点" Value="新建节点"> <asp:TreeNode Text="新建节点" Value="新建节点"> <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode> </asp:TreeNode> </asp:TreeNode> </asp:TreeNode> <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode> <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode> <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode> <asp:TreeNode Text="新建节点" Value="新建节点"> <asp:TreeNode Text="新建节点" Value="新建节点"> <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode> </asp:TreeNode> </asp:TreeNode> <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode> <asp:TreeNode Text="新建节点" Value="新建节点"> <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode> </asp:TreeNode> <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode> <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode> <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode> <asp:TreeNode Text="新建节点" Value="新建节点"> <asp:TreeNode Text="新建节点" Value="新建节点"> <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode> </asp:TreeNode> </asp:TreeNode> <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode> </Nodes> <NodeStyle Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" HorizontalPadding="5px" NodeSpacing="0px" VerticalPadding="0px" /> </asp:TreeView> </td> </tr> <tr> <td> </td> </tr> </table> <div class="autoaddheight"> </div> </div> <div id="rightbody"> <br /> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> <br /> <br /> <br /> <br /> <br /> <br /> <div class="autoaddheight"> <br /> <br />  </div> </div> </div> <div class="autoaddheight"> </div> <div id="bottom"> <table width = "100%" align="left"> <tr> <td style=" 250px"><div id="times" style=" font-size: 10pt;"></div> <script language="javascript" type="text/javascript"> setInterval("times.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000); </script> </td> <td style=" 20px"> </td> <td style=" 67px"> </td> <td style=" 19px"> </td> <td style=" 173px"> </td> <td style=" 11px"> </td> <td style=" 60px"> </td> <td> </td> <td style="text-align: right"> <img src="../images/userset.gif" />系统设置<img src="../images/about.gif" />关于</td> </tr> </table> </div> </div> </form> </body> </html>

查看全文

相关阅读:
利用jenkins+saltstack+sh 修改nginx配置文件并重新加载
 利用jenkins+saltstack+sh部署项目到多台服务器
 基于9款CSS3鼠标悬停相册预览特效
 基于jquery横向手风琴效果
 基于jQuery图片元素网格布局插件
 基于jQuery左侧大图右侧小图切换代码
 sql2005,sql2008,sql2012清空日志语句
 基于jQuery鼠标悬停上下滑动导航条
 基于jQuery鼠标点击弹出登陆框效果
 纯CSS3悬停图标旋转导航动画代码

原文地址：https://www.cnblogs.com/oldkingsir/p/2365654.html