Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  经典实例  >  正文 css 容器高度100%及相对高宽

css 容器高度100%及相对高宽

发布时间:2020-05-22   编辑:www.jquerycn.cn
jquery中文网为您提供css 容器高度100%及相对高宽等资源,欢迎您收藏本站,我们将为您提供最新的css 容器高度100%及相对高宽资源

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


绝对定位重叠效果

#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;}


纵向高度相对大小效果

#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;}


横向宽度相对大小效果

#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;}


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

IE6.0和FF1.5测试通过

 

您可能感兴趣的文章:
css 容器高度100%及相对高宽
js获取浏览器窗口大小与屏幕宽高
高度100%的绝对定位自适应布局
JS获取屏幕、浏览器窗口大小、网页高度宽度的方法详解
js获取屏幕高度 js屏幕属性信息
div css网页显示不完整的原因分析及解决方案
JS 获取浏览器和屏幕宽高等信息 方法详解
CSS3中如何充分使用视窗单位来布局
html5中video标签如何设置视频的宽度和高度
CSS等比列放大缩小效果(宽度和高度)

[关闭]