相关文章
10%网页包含恶意代码 个人电脑难防
谈Flash的破解与加密大法【攻防结合】
企通互联实用：网页制作中常用的辅助代码
网站建设有潜力好网站必须具备的八个规则
北京网站制作消除痛苦 网页浏览更舒适
北京网站建设用DIV CSS设计网页时的八个必要的小技巧
企通互联网页特效推荐 可以任意编辑的动态表格
北京网页设计本地检验网页是否符合标准的几种方法
企通互联用推送技术动态更新页面内容
北京网站设计网页特效：导航条上的放大效果
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网页设计 >> 北京网页设计网站设计高度100%的绝对定位自适应布局技巧
北京网页设计网站设计高度100%的绝对定位自适应布局技巧
容器高度100%是经常用到的需求，任何容器都可以实现，而且不需要嵌套关系。 Www@Chinaz@com
把body看作是一个容器，做为内部对象的上层标签，他的高度设置为100% 北京网页设计是关键。 Chinaz.com
最基本的例子
中.国站长站
* { margin:0; padding:0; border:0;}北京网站制作
html,body { height:100%;} /* 同时设置 www.qitongnet.comhtml是为了兼容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、N行布局企通互联 北京网站制作
3、N列加N行交叉布局
值得注意的是在FF下浏览相对大小容器页面时，调整窗口大小的同时容器大小进行实时调整，而IE只会在窗口调整完毕后才出效果。
中国.站. 网页设计长站
