仿站咨询QQ:2587483189

手机微信同号:15850888840

DivCSS布局实例:三行单列上下固定高度

 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; },dede仿站垂直居中。 

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

示例代码 [www.mb5u.com]
<!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>DivCSS布局实例:三行单列 上下固定高度 中间自适应</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; 

  • 上一篇:CSS网站风格设计实例HuDong123
  • 下一篇:十个非常实用的CSS属性
  • 来源:未知//所属分类: 仿站DIV+CSS /更新时间:2016-10-22
    相关仿站教程
    • 相关链接:

      复制本页链接

    • 教程说明:

      DivCSS布局实例:三行单列上下固定高度

    bbin彩票网址在线-澳门皇家赌博网站-游戏厅电子游戏_仿站中国