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

　　容器高度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只会在窗口调整完毕后才出效果。

关键词：

【推荐给好友】【关闭】

最新五条评论

查看全部评论

评论总数 0 条

您的评论

用户名： （新注册） 密　码： 匿名：

·用户发表意见仅代表其个人意见，并且承担一切因发表内容引起的纠纷和责任
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的资讯，提倡就事论事，杜绝漫骂和人身攻击等不文明行为

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有