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

自适应

 容器高度100%是经常用到的需求,任何容器都可以实现,而且不需要嵌套关系。

把body看作是一个容器,做为内部对象的上层标签,他的高度设置为100%是关键。

最基本的例子
* { margin:0; padding:0; border:0;}
html,body { height:100%;} /* 同时设置html是为了兼容FF */
#box_2 { height:100%; background:#000;}
Demo http://www.rexsong.com/blog/attachments/200512/23_133414_height100_base.htm

重叠绝对高度效果
#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;}
Demo http://www.rexsong.com/blog/attachments/200512/23_114301_height100_1.htm

纵向相对高度效果
#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;}
Demo http://www.rexsong.com/blog/attachments/200512/23_115107_height100_2.htm

横向相对宽度效果
#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;}
Demo http://www.rexsong.com/blog/attachments/200512/23_115647_height100_3.htm

这种布局是不需要float的,还可以有很多变化:

1,N列布局
2,N行布局
3,N列加N行交叉布局

值得注意的是在FF下浏览相对大小容器页面时,调整窗口大小的同时容器大小进行实时调整,而IE只会在窗口调整完毕后才出效果。

IE5.0 / IE5.5 / IE6.0和FF1.5测试通过

时间: 2024-12-23 06:01:50

高度100%的绝对定位自适应布局的相关文章

高度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

高度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:absolu

容器高度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; to

最小高度100%页脚保持在底部的布局方法

有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不是那么完美,经过一下午的研究总结出一个利用负值外补丁的方法来实现这个效果的方法,兼容IE5.0+,Opera 8.5+,Firefox 1.5+.下面我们看步骤: 1.为了让浏览器识别高度100%我们需要先给 html 和 body 加上一个高度值,同时清除所有元素的 margin 和 padding.顺便提一下,经过我的

页脚最小高度100%保持在页面底部的布局方法

有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不是那么完美,经过一下午的研究总结出一个利用负值外补丁的方法来实现这个效果的方法,兼容IE5.0+,Opera 8.5+,Firefox 1.5+.下面我们看步骤: 1.为了让浏览器识别高度100%我们需要先给 html 和 body 加上一个高度值,同时清除所有元素的 margin 和 padding.顺便提一下,经过我的

css 自适应高度的两列页面布局实现方法

最大宽度的样式 通过将 "margin: 1em 5%" 修改为 "margin: 0" 可以很容易的切换到最大宽度的样式    代码如下 复制代码 #container { margin: 0; /* changed from 1em 5% */ background-color: #FFF; background-image: url(background.jpg); background-repeat: repeat-y; border: 1px solid

CSS实现网页右边固定左边自适应布局

一.右边固定左边自适应布局 右边的元素浮动 网页的渲染和网页的机构有很大的关系,最先出现的元素最先显示,右边的元素设置右浮动,左边的元素不浮动,但是设置margin-right,设置的值为右边元素的宽度. CSS  代码如下 复制代码 #nav { width: 200px; float: right; overflow: hidden; } #content-wrapper { margin-right: 200px; } HTML <div id="nav">     

最小高度100%页脚保持在底部的方法

有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不是那么完美,经过一下午的研究总结出一个利用负值外补丁的方法来实现这个效果的方法,兼容IE5.0+,Opera 8.5+,Firefox 1.5+.下面我们看步骤: 1.为了让浏览器识别高度100%我们需要先给 html 和 body 加上一个高度值,同时清除所有元素的 margin 和 padding.顺便提一下,经过我的

关于自适应布局的处理(利用浮动和margin负边距实现)

自适应布局在实际应用中越来越普遍了,今天分享几个自适应布局的demo,主要是浮动圣杯布局(也叫双飞翼布局,主要是利用浮动和margin负边距实现的),没有介绍绝对定位布局,都是我想,你能明白我下面的几个例子,绝对定位布局也是非常的简单了. PS:圣杯布局有个好处,符合前端开发中渐进增强的理念,因为浏览器解析是从DOM的上至下,圣杯布局能够把页面中重要的内容section放到DOM前面先解析,而次要的aside内容则放在DOM后面后解析. 下面的例子能够解决实际应用中绝大多数的自适应布局问题了,有