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

[ 2005-12-24 16:36:07 | Author: 一叶千鸟 ]

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

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

最基本的例子

* { margin:0; padding:0; border:0;}
html,body { height:100%;} /* 同时设置html是为了兼容FF */
#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: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;}

效果演示：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测试通过

无忧讨论：http://bbs.51js.com/viewthread.php?tid=51314
蓝色理想 http://www.blueidea.com/tech/web/2006/3131.asp

2006.03.14 相关讨论
DIV+CSS如何实现中间区域自适应高度？ http://www.blueidea.com/bbs/NewsDetail.asp?lp=1&id=2494868

[Last Modified By 一叶千鸟, at 2006-03-14 17:42:41]

Comments Feed: http://www.rexsong.com/blog/feed.asp?q=comment&id=165

Trackback URL: http://www.rexsong.com/blog/trackback.asp?id=165

View Mode: Show All | Comments: 6 | Trackbacks: 0 | Toggle Order | Views: 2064

一叶千鸟

[ 2006-01-04 17:43:25 ]

Quotes From old9

如果内容高度超过一屏呢

超过一屏，那就属于另外一个课题了，纯粹CSS现阶段实现不了两个不相干的容器等高。
看你怎么应用，稍微变通一下，一般需求都能应付。

old9*

[ 2006-01-04 14:38:23 ]

如果内容高度超过一屏呢

一叶千鸟

[ 2005-12-25 16:19:26 ]

不好意思，对那些东西不感兴趣，有兴趣的朋友自己测试吧。

Shark*

[ 2005-12-25 16:10:03 ]

IE5和IE5.5也没问题，最好再做一个包括Oprea，Safari在内的平台测试，这样就比较完美了。+U

一叶千鸟

[ 2005-12-23 13:47:00 ]

Quotes From Shark

不兼容firefox

刚才有点小BUG，修复了。

Shark*

[ 2005-12-23 13:43:05 ]

不兼容firefox
三行两列布局能否最小高度为100%？
我的页面布局是三行两列，大致如下：

<div id="header">...</div>
<div id="container">
  <div id="mainbg">
    <div id="left">...</div>
    <div id="right">...</div>
  </div>
</div>
<div id="footer">...</div>

我现在希望当中间的left和right内容不是很多的时候，
他们的高度＝浏览器高度－header的高度－footer的高度

也就是使得整个页面最小高度也是能够撑满的，这样能做到吗？

用js是能够做到，但我不希望通过js实现。。。似乎css能够做到，是不？

使用min-height吗？
最好先定义html和body的高度即100%, 在定义容器的高度100%, 可能能实现吧，我也没有没有试过；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
html {height:100%;}
body {height:100%; margin:0;}
#bg {heitht:100%; background:#f00;}
</style>
</head>

<body>
<div id="bg"></div>
</body>
</html>
我试了一下，没有成功~`
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
html {height:100%;}
body {height:100%; margin:0;}
#bg {height:100%; background:#00f;}
#header {height:10%; background:#f00;}
#container {heigth:80%; background:#c00;}
#container #left {heigth:80%; width:48%; float:left; background:#ccc; border:3px solid #fff;}
#container #right {heigth:80%; width:50%; float:right; background:#999; border:3px solid #fff;}
#footer {clear:both; height:10%; background:#000;}
</style>
</head>

如果header&footer是用百分比高度的话,试下这个
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
body,html{
  height: 100%;
  padding: 0;
  margin: 0;
}
#header,#footer{
  height: 10%;
  background: #EBF7F9;
}

#container{
  min-height: 80%;
  background: #FDF5E6;
}
/*\*/
* html #container{
  height: 80%;
}
/**/
</style>
</head>

<body>
<div id="header">...</div>
<div id="container">
<div id="mainbg">
<div id="left">...</div>
<div id="right">...Cellular Technologies
Cell line development
Engineered cell-based assays
Cell based assays are an essential tool in understanding biological pathways especially when linked to high throughput readouts. Native cell lines or cells engineered to express foreign reporter genes can be used to read out a biological target or pathway or to confirm the activity and mechanism of action of drug candidates. Dragonfly has extensive experience in establishing known cell-based assays or developing new ones.

Examples of engineered cells and assays which Dragonfly has experience in include:

Heterologous or chimeric receptor growth factor assays. Growth factor dependent cells can convenient cellular bioassays for growth factors or cytokines. Dragonfly has engineered heterologous human or rodent receptors into factor dependent cells as stable transformants to provide a readouts for ligand induced receptor activation or to assay small molecule or antibody antagonists. We have also engineered chimeric receptors with novel extracellular domains linked to a signaling intracellular domain to derive ligand dependent cell lines.
Engineered reporter cell assays. Reporter genes may be used to monitor promoter activity, the expression of tagged proteins, or to read out a biological pathway. Dragonfly has experience with multiple cell types engineered to express a variety of epitope tagged proteins or reporter proteins adapted to high throughput, 96 well assays. Examples of epitope tags or reporters we have worked with include: FLAG, His6, myc, GFP and lac Z.
</div>
</div>
</div>
<div id="footer">...</div>

</body>
</html>
我的header和footer都是固定高度的
唉，算了，先由他去吧。

提出这个想法的原因是网站如果内容不多的话，网站背景就会出现在footer之下，看起来不是很舒服，就希望能够最小高度也是100%。

看来是我吹毛求疵了。。。

谢谢两位帮助哦～方法先收了

看下这里,或许有点用
http://www.pmob.co.uk/temp/fixedlayoutexample5.htm

CSS Web Design
www.forest53.com
DIV+CSS如何实现中间区域自适应高度？
我来一段，公司程序员写的。

三个并列的div，分别是id=left middle jiantou


function SetSize()
{
var left = document.getElementById("left");
var jiantou = document.getElementById("jiantou");
var middle = document.getElementById("middle");
var maxHeight = 0;
maxHeight = left.scrollHeight;
maxHeight = maxHeight > jiantou.scrollHeight ? maxHeight:jiantou.scrollHeight;
maxHeight = maxHeight > middle.scrollHeight ? maxHeight:middle.scrollHeight;
left.style.height = maxHeight;
jiantou.style.height = maxHeight;
middle.style.height = maxHeight;
}

然后在页面里面加上 <body onload="SetSize()">
就可以了哦````

先判断三个div的高度，然后取最大的一个，等同于其他两个的高度。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<textarea cols=95 rows=12>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="css/001.css" type="text/css" media="all" />
<title>自适应高度</title>

<style type="text/css">

</style>
</head>

<body>
<div id="main"></div>
</body>
</html>
//
<html>
.<style type=text/css>
html,body{margin:0;height:100%}
.box_1 { position:absolute; left:0; width:100%; background:#f00; z-index:2;height:20%}
.t{top:0;}
.t1{top:20%;height:80%;background:#ffd2e9;}
.t2{top:80%;}
</style>
<body>
<div class="box_1 t"></div>
<div class="box_1 t1"></div>
<div class="box_1 t2"></div>
</body>
</html>

posted on 2006-03-23 15:27 汪杰阅读(883) 评论(0) 编辑收藏引用所属分类: div css dhtml

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

常用链接

留言簿(15)

随笔分类(1)

随笔档案(90)

文章分类(727)

文章档案(712)

相册

收藏夹

http://blog.csdn.net/prodigynonsense

友情链接

最新随笔

搜索

积分与排名

最新随笔

最新评论

阅读排行榜

评论排行榜