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. python学习笔记(字符串操作、字典操作、三级菜单实例)

    字符串操作 name = "alex" print(name.capitalize()) #首字母大写 name = "my name is alex" pri ...

  2. php设计模式总结-工厂模式

    使用工厂模式的目的或目标? 工厂模式的最大优点在于创建对象上面,就是把创建对象的过程封装起来,这样随时可以产生一个新的对象.减少代码进行复制粘帖,耦合关系重,牵一发动其他部分代码. 通俗的说,以前创建 ...

  3. java面试题——集合框架

    先来看一下集合框架关系图 Collection FrameWork 如下: Collection ├List │├LinkedList │├ArrayList │└Vector │ └Stack └S ...

  4. 对于System.exit(0)和System.exit(1)的一般理解

    public static void exit(int status) 终止当前正在运行的 Java 虚拟机.参数用作状态码:根据惯例,非 0 的状态码表示异常终止. 该方法调用 Runtime 类中 ...

  5. javascript设计模式-工厂方法模式

    工厂方法模式笔记  通过对产品类的抽象使其创建业务主要负责用于创建多类产品的实例  对于创建多类对象,简单工厂不太实用,这是简单工厂模式的应用局限,当然这正是工厂方法模式的价值之所在  通过工厂方法模 ...

  6. 启动/关闭oracle服务有三种方式

    启动oracle服务有三种方式: 1 从控制面板 2 使用MS-DOS命令 3 通过Oracle Administration Assistant for WindowsNT -通过控制面板启动ora ...

  7. cstore_fdw的安装使用以及源码分析

    一.cstore_fdw的简介 https://github.com/citusdata/cstore_fdw,此外部表扩展是由citusdata公司开发,使用RC_file格式对数据进行列式存储. ...

  8. 安装Nginx服务

    Nginx最大特点: 静态小文件(1M),支持高并发,同时占用系统资源很少.3W并发,10个进程,内存150M. Nginx特点: 1.配置简单,灵活,轻量. 2.高并发(静态小文件),静态几万的并发 ...

  9. Android使用C++截屏并显示

    使用android底层自带的截屏源码进行修改后,将截取屏幕的内容再次显示在屏幕上,使屏幕呈现出暂停的效果. android自带的截屏代码在android\JB\frameworks\base\cmds ...

  10. SQL必知必会 14-22(完)

    博主依然不想打字,又向你仍来了一堆代码... 13(续) 在SELECT中用COUNT()以及联合 mysql> SELECT customers.cust_id,COUNT(orders.or ...