div随内容自由延展高度.doc

在Div镶套布局中，父标签DIV的高度不变。在IE下没有问题，但是在FIREFOX下就有问题了。如图：发了两张同样的怕百度盗链，另一张放在我网站上，在教育网内/one2two/pic/item/a7c3653de3c3f1de9f3d6295.jpg/question.gif代码：!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /title无标题文档/title/headbodydiv style=width:300px;border:#FF0000 solid 1px;div style=width:200px; float:left; position:relative;border:#000000 solid 1px; clear:left??? p此处显示/p??? p新 Div 标签的/p??? p内容/p/divdiv style=width:80px; float:left; position:relative;border:#0000CC solid 1px; clear:right此处显示新 Div 标签的内容/div/div/body/html在网上搜索一下发现有同样问题的人还挺多，给的方法也很多，有用JS的，有用HEIGHT=100%的，我感觉都没有作用。 我在下面加了一个div style=clear:both/div加完后代码是：!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /title无标题文档/title/headbodydiv style=width:300px;border:#FF0000 solid 1px;div style=width:200px; float:left; position:relative;border:#000000 solid 1px; clear:left??? p此处显示/p??? p新 Div 标签的/p??? p内容/p/divdiv style=width:80px; float:left; position:relative;border:#0000CC solid 1px; clear:right此处显示新 Div 标签的内容/divdiv style=clear:both/div/div/body/html这样就可以解决问题了兼容FIREFOX下背景层的自适应高度-浏览器兼容教程 来源:艺酷建站 作者:艺酷原创 更新时间:2009-01-20 点击: 19 在FF下DIV层里包含的是DIV层,而不是内容文字的话,背景图是不会自动适应高度的,无忧布局的时候用到了背景自适应高度,就顺手发来,与大家一起分享. 收集整理了三种解决方法. 首先我们定义三个层. div id=container div id=main //div div id=sidebar //div /div 第一种: 设定CSS #container { display:table} container作为最外层，在IE下背景图可以自适应，但在FF下只有main层与sidebar层可以.只需定义#container { display:table}就可以了，原理是和以前的表格布局是一样的．只是这样的话会出现float层出错,不推荐使用. 第二种: 设定CSS #container{height:100% }#main{height:100% }#sidebar{height:100% } 这样就兼容了IE ,FF，比起display:table;的方法好些。display:table;会导致一些布局出错。 第三种: 设定CSS #container:after {?content: .;?display: block;?height: 0;?clear: both;?visibility: hidden;} :after（伪对象）