本文和大家重点讨论一下DIV高度自适应及注意问题,主要包括父div高度随子div的高度改变而改变和子div高度随父亲div高度改变而改变两种情况。

DIV高度自适应及注意问题

积累了一些经验,总结出一些关于div高度自适应的技巧,希望有助于大家,转载请标明出处,谢谢。

一、DIV高度自适应(父div高度随子div的高度改变而改变)

1、如果父div不定义height、子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改变。

代码:

<style type="text/css">
#aa{border:#000000 solid 5px}
#bb{border:#00ffff solid 5px;}
#cc{border:#0033CC solid 5px}
</style>
<div id="aa">父div</div>
<div id="bb">子div</div>
<div id="cc">子div</div>
</div>

效果:IE、FF下一致

2、如果父div定义height,子div均为标准流的时候,在IE下父div的height随内容变化而变化,ff中则固定大小,如父div设置height:50px

代码:

<style type="text/css">
#aa{border:#000000 solid 5px;height:50px}
#bb{border:#00ffff solid 5px;}
#cc{border:#0033CC solid 5px}
</style>
<div id="aa">父div</div>
<div id="bb">子div</div>
<div id="cc">子div</div>
</div>

IE效果

FF下效果

3、如果子div使用了float属性,此时已经脱离标准流,父div不会随内容的高度变化而变化,解决的办法是在浮动的div下面,加一个空div,设置clear属性both

未加空div代码:

<style type="text/css">
#aa{border:#000000 solid 5px;}
#bb{border:#00ffff solid 5px;float:left}
#cc{border:#0033CC solid 5px;float:left}
</style>
<div id="aa">父div</div>
<div id="bb">子div</div>
<div id="cc">子div</div>
</div>

IE效果:

FF效果:

修改后代码:

<style type="text/css">
#aa{border:#000000 solid 5px;}
#bb{border:#00ffff solid 5px;float:left}
#cc{border:#0033CC solid 5px;float:left}
</style>
<div id="aa">父div</div>
<div id="bb">子div</div>
<div id="cc">子div</div>
<div style="clear:both;"></div>
</div>

修改后效果:IE FF一致

4.另类的DIV高度自适应
原理:
padding-bottom将列拉长变的一样高,而负的margin-bottom又使其回到底部开始的位置,同时,溢出部分隐藏掉了。此方法必须加文档信息才能正常显示
代码:

<style type="text/css">
#aa{border:#000000 solid 5px;overflow:hidden;}
#bb{border:#00ffff solid 5px;float:left;padding-bottom:100000px;margin-bottom:-100000px;}
#cc{border:#0033CC solid 5px;float:left;padding-bottom:100000px;margin-bottom:-100000px;}
#dd{float:left}
</style>
<div id="aa">父div</div>
<div id="bb">b子div</div>
<div id="cc">c子div</div>
<div id="dd">d子div<br/><br/><br/><br/><br/>div>
</div>

效果:

二、DIV高度自适应(子div高度随父亲div高度改变而改变)

在有边框的情况下,你会发现同一个div,在IE下的高度和在FF下的高度是不一样的,比如你设置了高度为100px的div,边框是border:5px;IE的高度是5+5+空白区域=100px,而FF下高度是100px的div是不包括高度的,只是空白区域的高度,如下图黑框的部分:

黑框的上方是对齐的,但是设置了同样的高度,效果却不一样,代码如下:

<style type="text/css">
#aa{border:#000000 solid 5px;height:100px;}
#bb{border:#00ffff solid 5px;float:left;height:100%}
#cc{border:#0033CC solid 5px;float:left;}
</style>
<div id="aa">父div</div>
<div id="bb">b子div</div>
<div id="cc">c子div</div>
</div>

如果没有设置边框,完全没有高度不一致的情况,子div适应父div很简单,如上面代码,只是在子div加了height:100%属性即可。如果设置了边框,可以把子div的高度设置为比父div小上下边框高度的值,比如在此例中,可把#bb中height改为100-5-5=90px,结果在IE和Mozilla中显示一致。

有一点要注意,如果父div是body的话,也就是说一个body套了一个div,让div适合body的大小的,必须设置body的高度才能实现子div随body改变而改变,body{height:100%}

DIV高度自适应及注意问题(转)的更多相关文章

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

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

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

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

  3. CSS实现div高度自适应

    1.有时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应.在一般情况下,使用min-height即可解决.但是广大网民的 ...

  4. div高度自适应

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

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

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

  6. css中div高度自适应

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

  7. div高度自适应的问题

    对象height:100%并不能直接产生效果,是因为跟其父对象有关. #center{height:100%;} 上面的css样式是无效的,不会产生任何效果. 需要改写:   html,body{ m ...

  8. Header 与 Footer 的 DIV 高度固定, 中间内容 DIV高度自适应,内容不满一页时,默认填满屏幕。

    一.需求: 页面布局分三大块: Header Body Footer 1.内容不满一页时,Footer 在屏幕最底部,Body 填充满 Header 与 Footer 中间的部分. 2.当缩小浏览器时 ...

  9. Vue中div高度自适应

    Vue中尽量不使用dom的高度计算 <template> <div :style="conheight"> </template> <sc ...

随机推荐

  1. QTreeView

    隐藏左侧的小箭头

  2. linux的awk命令解读

    转自:http://blog.csdn.net/guoer9973/article/details/44650729 awk是行处理器: 相比较屏幕处理的优点,在处理庞大文件时不会出现内存溢出或是处理 ...

  3. Mac PD虚拟机卸载删除

    MAC 10.12.6 从Application直接删掉PD Mac盘-->资源庫-->preference-->删掉parallels

  4. hql date比较

    补充:相等时用to_char,比较大小(<或>)时用 时间格式(如果不是时间格式可以用to_date) java.util.Date date=new java.util.Date(); ...

  5. asp adodb.stream读取文件和写文件

    读取文件操作: '------------------------------------------------- '函数名称:ReadTextFile '作用:利用AdoDb.Stream对象来读 ...

  6. struts实现国际化

    上篇博客学习了Java国际化的一些基础知识,了解了这些知识之后,我们可以更好的过度到struts国际化. 本篇博客主要学习struts国际化的实现: 1.配置环境设置baseName. 在struts ...

  7. DWZ主从表界面唯一性验证(自写js)(二)

    上篇介绍了自写js判断的前三项,本篇博客介绍第四步,关于触发课程代码文本框的离开事件后,判断一整列的课程代码之间是否有重复的值. 此问题可以提取为判断一个数组里是否有重复值,重复值是什么. 第四步→判 ...

  8. SharePoint PowerShell创建一个GUID

    在编辑SharePoint后台XML架构时常需要在ID属性上填写一个GUID (Globally Unique Identifiers 全局唯一标识的简称): 我们可以打开SharePoint管理控制 ...

  9. linux下安装软件的常用方法

    在使用Linux系统的过程中,软件包的安装是避免不了的,在Linux下,软件安装程序的种类很多,安装方法也各式各样,(舒适性自然比不上windows :-))不过我们常见的软件包有两种: 1)含有软件 ...

  10. yum常用操作

    一.yum安装使用: 1.Yum:rpm的前端程序,用来解决软件包相关依赖性,可以在多个库之间定位软件包,up2date的替代工具 2.yum repository:yum repo,存储了众多rpm ...