【原创:CSS】容器高度100％及相对高宽方法

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

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

最基本的例子

* { margin:0; padding:0; border:0;}
html,body { height:100%;}
#box_2 { height:100%; background:#000;}

效果演示：http://www.rexsong.com/blog/atta ... _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;}

效果演示：http://www.rexsong.com/blog/atta ... 301_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;}

效果演示：http://www.rexsong.com/blog/atta ... 107_height100_2.htm

横向宽度相对大小效果

#box_1 { position:absolute; top:0; left:0; width:30%; height:100%; background:#f00; z-index:2;}
#box_2 { position:absolute; top:0; right:0; width:70%; height:100%; background:#000; z-index:1;}

效果演示：http://www.rexsong.com/blog/atta ... 647_height100_3.htm

实际应用中，可有很多变化，轻松实现没有嵌套的绝对或相对多列竖排、横排。

IE6.0和FF1.5测试通过

时间： 2024-10-31 14:39:34

【原创:CSS】容器高度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; to

高度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;}Demo http://www.rexsong.com/blog/attach

高度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％页脚保持在底部的布局方法

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

Css未知高度图片垂直居中实例

方法一: 该方法是将外部容器的显示模式设置成display:table,img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样就可以很方便的使用vertical-align象表格元素那样对齐了,当然这只是在标准浏览器下,IE6/IE7还得使用定位. HTML结构部分:  代码如下 复制代码 <div id="box">         <span><img src="images/demo.jp

css-safari浏览器100%适应高宽

问题描述 safari浏览器100%适应高宽 有一个logo,我设置用媒体查询自动适应屏幕高宽.但是只有在safari浏览器中会出问题. safari会让logo充满整个屏幕,改变原来的长宽比. HTML代码: <div id="logo"><a href="http://www.stilundso.de/"><img src="http://lorempixel.com/output/technics-h-c-200-206

js/jquery获取容器高度宽度代码

我们在js获取容器高度与宽度都是如下  代码如下 复制代码 <div id='div' style='width:20px;'></div> <script type='text/javascript'> alert(document.getElementById('div').style.width); //return 20px alert(document.getElementById('div').style.height); //return 空 </s

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

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