相关文章
北京网站建设用Dreamweaver为网页图像添特效
北京网站建设视觉设计不只是图形
北京网站制作XHTML初学者教程：XHTML标准属性
网站建设浏览器Firefox与IE在CSS样式表中的差异
网站建设方法汇总 禁止查看网页源代码全攻略
北京网站建设XHTML网页中加入CSS的五种方式
北京网站建设网页制作之如何管理好网站的css样式
网站设计从基础到精通：CSS实用教程（二）
网站设计为不同的浏览器载入不同CSS的二种方法
北京网站设计进行 Web 界面原型设计的一种方法
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网页设计 >> 企通互联网站设计高度100%的绝对定位自适应布局技巧
企通互联网站设计高度100%的绝对定位自适应布局技巧
容器高度100%是经常用到的需求，任何容器都可以实现，而且不需要嵌套关系。 Www@Chinaz@com
把body看作是一个容器，做为内部对象的上层标签，他的高度设置为100% 网站制作是关键。 Chinaz.com
最基本的例子
中.国站长站
* { margin:0; padding:0; border:0;}网页设计
html,body { height:100%;} /* 网页设计同时设置html是为了兼容FF */北京网站设计
#box_2 { height:100%; background:#000;} Chinaz_com
重叠绝对高度效果 中国站长.站
#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;} Chinaz.com
纵向相对高度效果
#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;}
横向相对宽度效果 Www.Chinaz.com
#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、 www.qitongnet.comN行布局 北京网页设计网站设计
3、N列加N行交叉布局
值得注意的是在FF下浏览相对大小容器页面时，调整窗口大小的同时容器大小进行实时调整，而IE只会在窗口调整完毕后才出效果。
中国 企通互联.站.长站
