HOME
BBS
深山帮帮欢迎您,您可以注册或者
qq登录只需一步,快速开始
深山旅行社网站管理系统开发完成,欢迎各位网友测试! 点这里测试
565449214 给站长留言
订阅本栏目 RSS您所在的位置: 深山工作室 > DIV+CSS学习 > 正文

CSS布局实例:上中下三行,中间自适应

天极网 2007-12-25 22:01:32 深山行者 字体:  浏览 6814 我要评论
CSS布局实例:上中下三行布局,上下定高,中间栏自适应浏览器高度,且内容垂直居中。本文代码在firefox 2.0 / win ie 6/ win ie 7 /opera 8.5 cn/win safari 测试通过。对于非ie内核浏览器,通过设定display:table、display:table-row和display:table-cell来模拟表格的表现形式。

  最外层#box { display:table; },高度100%,其子层#header/#main/#footer为{ display:table-row; },因此可以模拟表格的行效果,上下定高,则中间不定高的层自适应高度。

  #wrap层为{ display:table-cell; }模拟单元格,因此可以设定{ vertical-align:middle; },垂直居中。

  由于Win IE不支持{ display:table; },因此,只能采取定位的方式实现。内是针对ie的设定。

以下是引用片段:
<!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=gb2312" /> 
<title>上中下三行布局,上下定高,中间栏自适应浏览器高度,且内容垂直居中</title> 
<style type="text/css"> 
* { 
margin:0; 
padding:0; 

html, 
body, 
#box { 
height:100%; 
font:small/1.5 "宋体", serif; 


body { 
text-align:center; 

#box { 
text-align:left; 
background:#666; 
display:table; 
width:80%; 
margin:0 auto; 
position:relative; 

#box > div { 
display:table-row; 

#header, 
#footer { 
background:#fcc; 
height:50px; 

#main { 
background:#ccf; 

#main #wrap { 
display:table-cell; 
background:#ffc; 
vertical-align:middle; 

#text { 
text-align:center; 

</style> 
<!--[if IE]> 
<style type="text/css"> 
#header, 
#footer { 
width:100%; 
z-index:3; 
position:absolute; 

#footer { 
bottom:0; 

#main { 
height:100%; 
z-index:1; 
position:relative; 

#main #wrap { 
position:absolute; 
top:50%; 
width:100%; 
text-align:left; 

#main #text { 
position:relative; 
width:100%; 
top:-50%; 
background:#ccc; 

</style> 
<![endif]--> 
</head> 
<body> 
<div id="box"> 
  <div id="header">header</div> 
  <div id="main"> 
    <div id="wrap"> 
    <div id="text"> 
          <p>内容内容</p> 
          <p>内容内容</p> 
          <p>内容内容</p> 
          <p>内容内容</p> 
          <p>内容内容</p> 
          <p>内容内容</p> 
          <p>内容内容</p> 
          <p>内容内容</p> 
          <p>内容内容</p> 

          <p>内容内容</p> 
          <p>内容内容</p> 
          <p>内容内容</p> 
          <p>内容内容</p> 
          <p>内容内容</p> 
        </div> 
        </div> 
  </div> 
  <div id="footer">footer</div> 
</div> 
</body> 
</html> 

Ads loading...
相关阅读
( 2018-4-15 16:01:30 )利用CSS实现半透明效果兼容IE与火狐与chrome等浏览器
( 2015-3-11 9:06:06 )asp判断是否是手机访问
( 2015-3-11 9:03:55 )asp利用正则检查手机端的浏览器标识来确定是否是手机访问 如果是手机访问就使用手机模板
( 2014-10-30 10:46:40 )留言板留言板V7.0
( 2014-9-16 20:27:43 )页面里面的js和css的放的位置顺序与加载速度分析
( 2014-9-11 20:43:31 )用javscript实现为表格的每一行自动加上序号
( 2014-9-10 9:14:15 )鼠标放在表格区域内,当前格的一整行和一整列变色
( 2014-9-6 15:48:21 )Dreamweaver在onLoad运行_onOpen.htm时,发生了以下javascript错误
共有0条关于《CSS布局实例:上中下三行,中间自适应》的评论
发表评论
正在加载评论……
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 400 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
深山工作室网友评论声明,请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。

Ads loading...
更多信息>>栏目类别选择
rss学习
个人空间
网站设计
网站公告
下载
photoshop学习
ASP学习
DIV+CSS学习
SEO搜索引擎忧化
java学习
HTML学习
网站信息
网站类信息
更多>>同类信息
利用CSS实现半透明效果兼容IE与火狐与chrome等浏览器
在table中tr的display:block在firefox下显示布局错乱问题
在未知图片的宽度与高度时利用div+css将图片居中
用css做的英文首字母大写和英文全都大写通过各个浏览器
css优先级的例子
让DIV固定在浏览器窗口的底部(兼容IE6)
MarkMan 马克鳗,让设计更有爱 (超级给力的页面标注工具)
IE8 CSS HACK 兼容
Ads loading...
更多>>最新添加文章
批量删除access字段里面fld.Properties.Delete
ASP操作access或sqlserver数据库的函数库
asp采用access数据库搜索信息时因为日文片假名问题提示“Microsoft JET Database Engine 错误80040e14”的解决方法
asp中求两个数的百分比(利用百分比函数FormatPercent就可以自带%的符号)
asp利用sql操作数据表、数据库的一些方法
rs操作数据表记录集对象的方法
asp利用dateadd获得上个月、本月、下个月的第一天和最后一天
asp随机显示字符长度与类型(可随机显示数字、小写字母、大写字母,可以做为随机密码使用)
  • 业务 QQ:565449214
  • 手机:139 6134 7334
更多>>随机抽取信息
深山行者个人网站程序V0.2 效果图
window7简称win7下可以运行ASP文件,但是不能访问access数据库的解决办法
divcss范例下载
用javascript美化Select,并获取相应的值
windows xp 安装IIS,设置IIS。
设为首页代码
javascript表单验证!
javascript表格内移动上下列,可以做成ajax加上动态程序做成上下移动顺序
Ads loading...