相关文章
申请谷歌广告,让你的博客和网站得到收益...
网站制作CSS制作水平导航菜单效果
网页设计新手入门:XHTML DHTML SHTML的区别
北京网页设计使用Windows XP系统的风讯用户,请设置目录权限！
北京网站设计弹出网页窗口全攻略(html/hta)
网页设计CSS在IE和Nascape的显示差别
企通互联在Dreamweaver中插入背景音乐的几种方法
网站制作商业Flash设计经验谈(速度感)
网站设计flash AS游戏教程：游戏策划(上)PRG地图实现
网页设计FLASH MX 2004视频教程:图片切换效果（二）
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网站制作 >> 网站制作网页设计CSS布局实例:上中下三行,中间自适应
网站制作网页设计CSS布局实例:上中下三行,中间自适应
 |
最外层#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" /> www.qitongnet.com
<title>上中下三行布局，上下定高，中间栏自适应浏览器高度，且内容垂直居中</title> 北京网站设计
<style type="text/css"> 北京网站建设
* { 北京网站设计 www.qitongnet.com
margin:0; www.qitongnet.com
padding:0; 北京网站制作
} 网站制作
html, www.qitongnet.com
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; 企通互联
} www.qitongnet.com
#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%; www.qitongnet.com
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; www.qitongnet.com
} 北京网站制作
</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>
网站设计