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. file命令

    命令简介: 该命令用来识别文件类型,也可用来辨别一些文件的编码格式.它是通过查看文件的头部信息来获取文件类型,而不是像Windows通过扩展名来确定文件类型的. 执行权限 :All User 指令所在 ...

  2. AJAX实现简单的注册页面异步请求

    p { margin: 0px; padding: 0px } AJAX简介 (1)AJAX = 异步 JavaScript 和 XML. (2)AJAX 是一种用于创建快速动态网页的技术. (3)通 ...

  3. win10家庭版查看已连接wifi密码

    点击屏幕右下角无线网路图标. 点击网络设置. 完成.

  4. Office 365使用情况调查不完全分析报告

    感谢大家参与了9月13日在Office 365技术群(O萌)中发起的一个关于Office 365使用情况的调查,在一天左右的时间内,我们一共收到了67份反馈,其中绝大部分是在3分钟内提交的. 本次调查 ...

  5. Android中的 init.rc文件简介

    init.rc脚本是由Android中linux的第一个用户级进程init进行解析的. init.rc 文件并不是普通的配置文件,而是由一种被称为"Android初始化语言"(An ...

  6. 手机游戏渠道SDK接入工具项目分享(一)缘起

    #剧情章节 # 上周刚结束一个外包的项目,开发手机游戏渠道SDK聚合接入工具的,现在有空回顾整理一下这个项目开发过程,因涉嫌商业秘密不会提供项目代码,只谈下开发思路和掉过的坑. 本人多年从事手机互联网 ...

  7. UITableview delegate dataSource调用探究

    UITableview是大家常用的UIKit组件之一,使用中我们最常遇到的就是对delegate和dataSource这两个委托的使用.我们大多数人可能知道当reloadData这个方法被调用时,de ...

  8. 静态库介绍与简单演练及同名资源冲突解决(.a格式的静态库)

    1.静态库和动态库都是闭源库,不公开源代码. 静态库:.a和.framework 动态库:.dylib和.framework(iOS9取消了.dylib,使用.tbd替代) 2.静态库和动态库在使用上 ...

  9. couchDB视图

    视图是设计文档的一部分. 视图函数 map函数 Map方法的参数只有一个,就是当前的文档对象.Map方法的实现需要根据文档对象的内容,确定是否要输出结果. 如果需要输出的话,可以通过emit来完成. ...

  10. CAS Client集群环境的Session问题及解决方案

    [原创申明:文章为原创,欢迎非盈利性转载,但转载必须注明来源] 之前写过一篇文章,介绍单点登录的基本原理.这篇文章重点介绍开源单点登录系统CAS的登录和注销的实现方法.并结合实际工作中碰到的问题,探讨 ...