div自适应高度 Div即父容器不根据内容自适应高度,我们看下面的代码:

 <div id="main">
<div id="content">
</div>
</div>

当Content内容多时,即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了,但容器main的高度还是不能撑开。   

我们可以通过三种方法来解决这个问题:

1增加一个清除浮动,让父容器知道高度。请注意,清除浮动的容器中有一个空格:

  

 <div id="main">
<div id="content"></div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
</div>

2增加一个容器,在代码中存在,但在视觉中不可见:

  

 <div id="main">
<div id="content"></div>
<div style="height:1px; margin-top:-1px;clear: both;overflow:hidden;"></div>
</div>  

3增加一个BR并设置样式为clear:both:

 <div id="main">
<div id="content"></div> <br style="clear:both;" />
</div>

引用自百度文库,作者:烟雨love2010 http://wenku.baidu.com/link?url=NiPaGqoUWLET5BIKLwpUKCzY6umX06f2AmPaliyNgC_hRsaQ59oPMi8us82qmlrKM_j_H9zKcKaQW4vF6RNE4lCTeJ6-Ebp_QunC95VgxiW

还有一个百度来的设置CSS的方法:

#div{

  _height:200px;

  min-height:200px;

  //能兼容ie6,7,8 ,火狐等浏览器。

}

div自适应高度的更多相关文章

  1. Div自适应高度的方法

    http://www.yutheme.cn/website/index.php/content/view/39/63.html div高度自适应是个比较麻烦的问题,在朋友artery那里看到这个文章, ...

  2. div 自适应高度

    自适应高度 ,设置最小高度:通常情况下,没有设置高度,div默认自适应高度且无最低高度 1 div{ _height:200px; /* css 注解: 仅IE6设别此属性,假定最低高度是200px ...

  3. 设置div自适应高度滚动

    <body> <div id="divc" style="overflow: auto;"> </div> <a id ...

  4. div 自适应高度 自动填充剩余高度

    方案1: Html: <div class="outer"> <div class="A"> 头部DIV </div> &l ...

  5. div套div 里面div有浮动 外面div自适应高度

    <div style="background-color:red;"> <div style="float:left;background-color: ...

  6. 如何设置div自适应高度

    1.给div添加overflow属性 .div{ width:760px; overflow:hidden; } 2.其他的设置height:auto 等我测试没有效果

  7. 外部div自适应内部标签的高度,设置最小高度、最大高度

    一.div自适应高度:在前端开发中经常需要让外层的div自动适应内部标签和内容的高度,内部标签可能是<div>.<ul>.<ol>或者文字等各种内容.造成外层的di ...

  8. div有最小高度且自适应高度

    DIV最小高度且自适应高度   在IE6中,如果子容器的高度超过父容器的时候,父容器会被子容器撑开,所以我们可以直接设置一个height的高度值即可.但是在IE7和firefox就不行了,它不会自动撑 ...

  9. 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...

随机推荐

  1. linux中~和/的区别

  2. IE 浏览器各个版本 JavaScript 支持情况一览表

    语言元素 语言元素 突发.IE6 标准.IE7 标准 IE8 标准 IE 9 标准 IE 10 标准 边缘 Windows 应用商店应用程序 __proto__ 属性 (Object) (JavaSc ...

  3. 深入理解 RESTful Api 架构

    转自https://mengkang.net/620.html 一些常见的误解 不要以为 RESTful Api  就是设计得像便于 SEO 的伪静态,例如一个 Api 的 URL 类似于 http: ...

  4. 便于开发的Helper类

    一.将config封装实体层: 例子config: <?xml version="1.0" encoding="utf-8" ?> <Sett ...

  5. Atitit 《控制论原理与概论attilax总结

    Atitit <控制论原理与概论attilax总结 <控制论> 奠基之作,出自创始人维纳.虽然内容权威,但我认为带有相当强烈的个人色彩,且门槛较高,不适合入门.深入研究控制论必看书籍 ...

  6. 第二章作业-第3题(markdown格式)-万世想

    第3题题目是: 完成小组的"四则运算"项目的需求文档(使用Markdown写文档),尝试同组成员在各自PC上修改同一文档后,如何使用Git命令完成GitHub上的文档的更新,而不产 ...

  7. grunt-笔记

    package.json: { "name": "grunt-uglify", "version": "1.0.0", ...

  8. SCVMM中Clone虚拟机失败显示Unsupported Cluster Configuration状态

    在SCVMM进行虚拟机的Clone,虽然失败了,但是Clone出虚拟机却显示在SCVMM控制台的虚拟机的列表中,并且状态是Unsupported Cluster Configuration.无法修复, ...

  9. python-copy模块使用

    浅拷贝 import copy dic = { "cpu":[80,], "mem":[80,], "disk":[80,] } print ...

  10. python中的ValueError

    在初学时候,会遇到这种错误,修改了代码,一一比对了代码,发现代码,没有错误,可是就是运行不了. 我们先从错误的语句来入手!(这显示了英语很重要)   ValueError: need more tha ...