一叶千鸟 发表于 2005-12-23 14:10:57

【原创: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/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;}

效果演示：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;}

效果演示：http://www.rexsong.com/blog/attachments/200512/23_115107_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/attachments/200512/23_115647_height100_3.htm

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

IE6.0和FF1.5测试通过

from: http://www.rexsong.com/blog/article.asp?id=165

lybykw 发表于 2005-12-30 09:12:57

不错的贴子。

hbjswj 发表于 2005-12-30 12:20:06

还不知道你的BLOG里有这么多文章啊.看看去.

m++ 发表于 2006-1-25 17:50:08

哈。收下，吸收中。。

ansonvili 发表于 2006-2-6 10:53:02

收了

紫色真情 发表于 2006-2-6 16:46:09

仔细揣摩中....

好贴必收!

shiliangdong 发表于 2006-4-21 17:27:32

我怎么这么晚才看到啊。

xacs 发表于 2006-9-5 16:10:26

现在正学制作网页。

学习中……

Kenn 发表于 2006-11-3 11:11:10

没加精!!!没加精?

收藏了.3Q

flashere 发表于 2006-11-10 22:43:45

:victory:
Thx..
很使用
但是 我不明白你得源代码里面有这个

</style>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>

对本页面有甚么关系

谢谢 等待你回复.

streemwu 发表于 2008-4-17 15:56:38

学习
页: [1]
查看完整版本: 【原创:CSS】容器高度100%及相对高宽方法