开启左侧

高度100%的绝对定位自适应布局技巧

[复制链接]
发表于 2007-5-7 11:14:43 | 显示全部楼层 |阅读模式
容器高度100%是经常用到的需求,任何容器都可以实现,而且不需要嵌套关系。  把body看作是一个容器,做为内部对象的上层标签,他的高度设置为100%是关键。   最基本的例子   * { margin:0; padding:0; border:0;}   html,body { height:100%;} /* 同时设置html是为了兼容FF */   #box_2 { height:100%; background:#000;}   重叠绝对高度效果   #box_1 { position:absolute; top:0; left:0; width:100%; height:50px; background:#f00; z-index:2;}   #box_2 { position:absolute; left:0; top:0; width:100%; height:100%; background:#000; z-index:1;}   纵向相对高度效果   #box_1 { position:absolute; top:0; left:0; width:100%; height:30%; background:#f00; z-index:2;}   #box_2 { position:absolute; left:0; top:30%; width:100%; height:70%; background:#000; z-index:1;}   横向相对宽度效果   #box_1 { position:absolute; top:0; left:0; width:40%; height:100%; background:#f00; z-index:2;}   #box_2 { position:absolute; top:0; right:0; width:60%; height:100%; background:#000; z-index:1;}   这种布局是不需要float的,还可以有很多变化:   1、N列布局   2、N行布局   3、N列加N行交叉布局   值得注意的是在FF下浏览相对大小容器页面时,调整窗口大小的同时容器大小进行实时调整,而IE只会在窗口调整完毕后才出效果。
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

 
QQ在线咨询
售前咨询热线
0532-88371356
售后服务微信
pingduwangzhan
快速回复 返回顶部 返回列表