Div即父容器不根据内容自适应高度的解决方法
发布时间:2010-04-23 18:19:00
ps:不曾想还有那么好用的方法。汗一个先。
Div即父容器不根据内容自适应高度,我们看下面的代码:
<div id="main">
<div id="content"></div>
</div>
当Content内容多时,即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了,但容器main的高度还是不能撑开。
我们可以通过三种方法来解决这个问题。
一,增加一个清除浮动,让父容器知道高度。请注意,清除浮动的容器中有一个空格。
<div id="main">
<div id="content"></div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
</div>
二,增加一个容器,在代码中存在,但在视觉中不可见。
<div id="main">
<div id="content"></div>
<div style="height:1px; margin-top:-1px;clear: both;overflow:hidden;"></div>
</div>
三,增加一个BR并设置样式为clear:both。
<div id="main">
<div id="content"></div>
<br style="clear:both;" />
</div>
补充:
<div id="main">
<div id="content">
<p>demo1</p>
<p>demo2</p>
<p>demo3</p>
</div>
</div>
#main { border:1px solid #999999; background-color:#CCCCCC; height:100%; overflow:hidden;}
#content { float:left;}
以上三个方法都不是最好的解决方法,因为在程序代码观念中是提倡尽量不要添加无意义的标签代码
介绍我的解决方法是直接在最外层div加以下样式
#main {
height:100%;
overflow:hidden;
}
猜你喜欢
- 当很多人发现在DW4中定义CSS很方便的时候,开始报怨FP2000不能定义CSS,甚至就此抨击FP2000如何的不好。事实上,在FP2000
- 1、把这段拷到DW里,存成HTML文件。<HTML><HEAD><TITLE>move backgrou
- 在添加新记录时,有时候我们需要将部分动态内容自动添加到指定的文本域,例如上传一个文件后,将文件名自动添加到一个独立的记录框内,以
- 分享几个字体设计:1.巧克力2.绿野邂逅是人间四月天3.去年花开的时候4.仲夏梦之夜5.芊芊茉莉香6.玫瑰人生7.真情告白8.遮掩锋芒
- 问题:SQL Server 2005中如何利用xml拆分字符串序列?解答:下文中介绍的方法比替换为select union all方法更为见
- 这个是我在蓝色看到的,楼主想实现图片按比例缩放的功能(缩略图),把图片固定在一定的宽高范围内,不会变形,失真。例如:缩略图的框是94px*9
- 1、用户有三种:活跃用户、沉睡用户、外部用户。2、据不完全统计,外部用户8亿,沉睡用户1.2亿,活跃用户1千万。3、就算不去管活跃用户,或者
- 以前工作的时候由于Oracle8i数据库经常出现用户过多的错误,由于数据量大,经常出现ORA:12500错误,但主要原因是访问过多而引起的,
- 像素误差看自己设计好上线的网站,偶尔会发觉像素行间出现了弹性空间,总在不经意间蹦出一定的差距。有些页面很难发现,比如活动类页面,这类页面多呈
- 聚集索引,数据实际上是按顺序存储的,数据页就在索引页上。就好像参考手册将所有主题按顺序编排一样。一旦找到了所要搜索的数据,就完成了这次搜索,
- 随着技术的不断升级,微软的王牌数据库SQL Server 2000正在逐渐淡出人们的视线,而新版的SQL Server 2005正成为企业和
- Oracle不像SQLServer那样在存储过程中用Select就可以返回结果集,而是通过Out型的参数进行结果集返回的。实际上是利用REF
- #region 读写xml文件的2个小函数,2005 4 2 by hyc public void 
- Javascript 中的闭包其实很改语言中很难理解的一部分。感谢 Stuart 提供了那么棒的 PPT,它深入浅出的解释了 Javascr
- 打开网页,然后将javascript:document.body.contentEditable='true';
- Insert 和 Update假设现在你要把下面的数据插入到数据库中.ID = 3TheDate=mktime(0,0,0,8,31,200
- 方法一1. 下载MySQL源码分发包,不用区分操作系统,我们需要的东西是一样的;2. 重命名自己的mysql的data目录下的mysql文件
- 什么是错误页面?是指链接指向的网页现在失效了,原因可能是用户输错了地址,也可能是网站结构调整,内容删除,或者地址变更都有可能出现这种情况。那
- 呵呵,我之前也写过一个类似的模板替换功能.>> 已实现:>、<、>=、<=、=、==等简单的运算>
- 一.gb2312,gbk,utf8等支持多字节编码的字符集都可以储存汉字,gb2312中的汉字数量远少于gbk,而gb2312,gbk等都可