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

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

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

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

其中class为test的div有浮动的li,当li比较多的时候,即便是div设置的是最小高度min-height,也无法被撑开。 原因就在于作为子容器的li是浮动的 。在这种情况下,即便是li的内容超过了div的高度,div也无法撑开。

解决方法如下:

在浮动的容器后面,父容器结束之前加入一个div,代码如下:

<div class="test">
  <ul>
    <li>内容1</li>
    <li>内容1</>
  </ul>
  <div class="clearfloat"></div>
</div>
.clearfloat{clear:both;height:0;font-size:1px;line-height:0px;}

这样就实现了div高度自适应。

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

  1. css中div高度自适应

    高度的自适应(父div高度随子div的高度改变而改变) 1.如果父div不定义height.子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改 ...

  2. 纯CSS实现Div高度根据自适应宽度(百分百调整)

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

  3. CSS两列高度自适应,右边自适应

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

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

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

  5. DIV高度自适应及注意问题(转)

    本文和大家重点讨论一下DIV高度自适应及注意问题,主要包括父div高度随子div的高度改变而改变和子div高度随父亲div高度改变而改变两种情况. DIV高度自适应及注意问题 积累了一些经验,总结出一 ...

  6. div高度自适应(总结:min-height:100px; height:auto;的用法)

    对于div高度自适应问题,我总是用一句话:height:auto来解决. 但是很多时候我们需要的是当div内部有内容时,高度会随着内容的增加和增加,当div中没有内容时,div能够保持一个固定的高度. ...

  7. DIV+CSS左右列高度自适应问题

    其实解决DIV+CSS左右两列高度自适应的方法就是要注意两点:一是在最外层加上overflow:hidden,然后在左边列加上margin-bottom:-9999px;padding-bottom: ...

  8. div高度自适应

    第一种: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  9. div高度自适应填充剩余部分

    在乐学一百的开发过程中,遇到了一个小乐Fm开发,需要跟百度fm差不多,上边一个条,下边一个条,中间部分填充.但是还不能固定高度,因为屏幕的宽高都不一样...height:100%是不可行的.搜了一圈, ...

随机推荐

  1. Spring Cloud的小改进(五)

    1.在Eureka中不能看到具体服务的实例信息: 问题点:服务注册到 Eureka 之后,可以看到在 “Status” 显示的服务信息不明确(不知道具体的服务名等信息),如下图所示: 解决方法: 在服 ...

  2. apache启动失败

    1.端口被占用 2.路径及文件夹问题(安装路径的文件夹名称中不能为中文)

  3. 处理机调度算法( RR 、HRRF)

    1. P117页,练习15:最高响应比( HRRF) 2. P119页,练习22(2):时间片轮转( RR ) 3. 现设定采用三级反馈队列调度算法,三个队列分别为0.1和2,对应时间片为2.4.8. ...

  4. python3 第二十七章 - 内置函数之str相关

    Python 的字符串常用内建函数如下: 序号 方法及描述 实例 1 capitalize()将字符串的第一个字符转换为大写   2 center(width, fillchar) 返回一个指定的宽度 ...

  5. web端常见测试点

    由于web端应用于用户直接相关,又通常需要承受长时间的大量操作,因此web项目的功能和性能都必须经过可靠的验证.web端测试常见的有界面测试.功能测试.性能测试.可用性(接口)测试.兼容性测试.安全性 ...

  6. JS格式化日期时间的方法

    //格式化时间的方法 function format(fmt, date) { var o = { "M+": date.getMonth() + 1, //月份 "d+ ...

  7. Embedding层

    示例解释: model = Sequential() model.add(Embedding(1000, 64, input_length=10)) #输入中的数值最大值是1000,输出的第三维度是6 ...

  8. MySQL中 指定字段排序函数field()的用法

    MySQL中的field()函数,可以用来对SQL中查询结果集进行指定顺序排序. 函数使用格式如下: order by (str,str1,str2,str3,str4……),str与str1,str ...

  9. 走进JDK(十二)------TreeMap

    一.类定义 TreeMap的类结构: public class TreeMap<K,V> extends AbstractMap<K,V> implements Navigab ...

  10. java 项目相关 学习记录

    一位资深程序员大牛给予Java初学者的学习路线建议  [任何时期都可以好好看看] https://www.imooc.com/article/8993 https://www.jianshu.com/ ...