参考网址:http://www.jb51.net/css/140685.html

随着微软新操作系统的上市,ie6现在用的人越来越少了,但是XP系统看来是太过经典,仍然有相当多的用户在使用,且这部分人群中的大部分也没有单独升级浏览器的习惯,于是乎ie6依旧是使用最多的浏览器版本。根据本站流量的统计,来自ie6的访问比重为72.6%。表明了以上的观点,虽然最高的时候,ie6占了90%以上。

言归正传,div+css作为网页的布局已经是大势所趋。它的优点不在这里啰嗦。但最近经常有朋友提到关于容器高度自适应的兼容性问题。在这里简单作答。

1.有些时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应。在一般情况下,使用min-height即可解决。但是广大网民的首选浏览器ie6并不支持min-height。ie7,opera,火狐没有问题。所以采用以下写法可以解决兼容性:

 
代码如下:

height:auto!important;
height:200px;
min-height:200px;

2.很多朋友反映用上面的方法后,在有些时候依然无法解决容器无法撑开自适应的问题。那一定是有容器嵌套的情况下,而子容器又是浮动的。例如

<div
class="fuqin"><ul><li>内容1</li><li>内容1</li></ul></div>

其中class为fuqin的div有浮动的li,当li比较多的时候,即便是div设置的是最小高度,也无法被撑开。

原因就在于作为子容器的li是浮动的即 。在这种情况下,即便是li的内容超过了div的高度,div也无法撑开。

解决方法如下:

在浮动的容器后面,父容器结束之前加入一个div

代码如下:
<div class="fuqin"><ul><li>内容1</li><li>内容1</li&gt;</ul><div class="clearfloat"></div></div>
.clearfloat{clear:both;height:0;font-size: 1px;line-height: 0px;}

里面的div怎么撑开外面的div让高度自适应的更多相关文章

  1. 里面的div怎么撑开外面的div,让高度自适应

    关于容器高度自适应的兼容性问题.1.有些时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应.在一般情况下,使用min-h ...

  2. div模拟textarea文本域轻松实现高度自适应——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...

  3. div模拟textarea文本域轻松实现高度自适应

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 外面的wifi非常精彩,外面的wifi非常不安

    星期一果然非常忙,看到安卓漏洞还是午休的时候.可能我们都习惯了.我们的信息安全一向难以得到保障.对于我来说,可能都无所谓了.可是作为用户之中的一个,我们也不能太安分,该须要的保障还是得维护. 本来.我 ...

  5. 使用div模拟textarea,实现文本输入框高度自适应(附:js控制textarea实现文本输入框高度自适应)

    一.使用textarea标签进行多行文本的输入有很多限制,比如不能实现高度自适应,会出现难看的滚动条等问题. HTML5中添加了一个新属性contenteditable,该属性可以让input,tex ...

  6. jquery之div模拟textarea文本域轻松实现高度自适应

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. 建议 里面的sql查找单列 外面的sql查找所有列 这样方便查找数据

  8. 四种方法解决DIV高度自适应问题

    本文和大家重点讨论一下解决DIV高度自适应的方法,这里主要从四个方面来向大家介绍,相信通过本文学习你对DIV高度自适应问题会有更加深刻的认识. DIV高度自适应 关于DIV高度的自适应,一直是个让人头 ...

  9. 使用contenteditable+div模拟textarea文本域实现高度自适应

    使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...

随机推荐

  1. VMware网络设置

    Host-only:主机想和虚拟机通信时使用 NAT :虚拟机想通过主机IP上网时使用 Bridged:虚拟机直接连接到物理网络时使用 Q:如果主机想和虚拟机正常通信又想能上网怎么办? A:添加两个网 ...

  2. linux下python安装到指定目录

    由于使用公司服务器时没有root权限,只能把python安装到个人文件夹下,使用源码包方式安装,这里记录一下. 1.python下载 cd到目录/users/w,在此目录下安装python.通过wge ...

  3. C# jquery webservices 跨域调用的问题解决方案

    前台代码: <script src="js/jquery-1.9.1.min.js" type="text/javascript"></scr ...

  4. 如何把自己打造成技术圈的papi酱

    最近半年,一个叫papi酱的平胸女子连续在微博.朋友圈.创业圈刷屏,当之无愧成了中文互联网的第一大网红.呃,你以为我会巴拉巴拉说一堆网工创业的事?NO,今天想借papi酱的话题跟大家一起聊聊程序员如何 ...

  5. linux环境下配置java WEB项目运行环境,jdk8+tomcat8+mysql5.7.11 新手向

    一:安装jdk 1.下载jdk  在oracle下载东西的时候因为oracle的一些验证机制,所以需要在链接前面添加一些参数 wget --no-check-certificate --no-cook ...

  6. iOS ARC中CTCallCenter没用,无法监听电话的解决方案

    今天在尝试使用CTCallCenter进行电话监听时,发现一直无法捕获电话状态改变的事件,研究了一番之后找到了解决方案,在这里分享给大家. 首先使用CTCallCenter监听电话的代码如下: CTC ...

  7. Struts2自定义类型转换,和处理类型转换错误

    Struts2自定义类型转换: 从前台接受到的类型全部是字符串,Struts2自带的一些基本类型转换有时不能满足我们的特别需要,如:日期字符串输入格式,还有一些自定义的类,直接传到后台,我们需要一些自 ...

  8. drop delete truncate 区别

    http://jingyan.baidu.com/article/8275fc8693e11846a03cf696.html

  9. Android--Retrofit+RxJava的简单封装(三)

    1,继续接着上一篇的讲讲,话说如果像上一篇这样的话,那么我们每一次请求一个结构都要创建一堆的Retrofit对象,而且代码都是相同的,我们可以试试封装一下 先创建一个HttpMethods类,将Ret ...

  10. WIN7远程桌面连接方法!

    WIN7远程桌面连接方法!