Meteor

div高度自适应不同效果分析

2014-12-18 / Meteor / 互联网文 / 自适应 , 高度 , div / 148127 次围观 / 9 条评论

cssdiv.jpg
今天在对我的另个博客(梓悦平安 http://b.pxsky.net)修改主题,需要用到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
子div
子div

效果:IE、谷歌浏览器下一致,如下图:
cssdiv1.jpg
2、如果父div定义height,子div均为标准流的时候,在IE下父div的height随内容变化而变化,谷歌浏览器中则固定大小,如父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
子div
子div

IE浏览器下效果:
cssdiv2-1.jpg
谷歌浏览器下效果:
css.jpg
3、如果子div使用了float属性,此时已经脱离标准流,父div不会随内容的高度变化而变化,解决的办法是在浮动的div下面,加一个空div,设置clear属性both。或者在父div里设置overflow属性为hidden。

未加clear:both属性的代码:

<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
子div
子div

IE浏览器下效果:
cssdiv3-1.jpg
谷歌浏览器下效果:
cssdiv3-2.jpg
加clear:both属性修改后的代码:

<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
子div
子div

修改后效果:IE、谷歌浏览器下一致,如下图:
cssdiv4.jpg
4、另类的高度自适应
原理:padding-bottom将列拉长变的一样高,而负的margin-bottom又使其回到底部开始的位置,同时,溢出部分隐藏掉了。此方法必须加文档信息才能正常显示。

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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
子div
子div




效果:
cssdiv5.jpg

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

在有边框的情况下,你会发现同一个div,在ie下的高度和在谷歌浏览器下的高度是不一样的,比如你设置了高度为100px的div,边框是border:5px;IE的高度是5+5+空白区域=100px,而谷歌浏览器下高度是100px的div是不包括高度的,只是空白区域的高度。
IE浏览器下效果:
cssdiv6-1.jpg
谷歌浏览器下效果:
cssdiv6-2.jpg
黑框的上方是对齐的,但是设置了同样的高度,效果却不一样,代码如下:

<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
子div

如果没有设置边框,完全没有高度不一致的情况,子div适应父div很简单,如上面代码,只是在子div加了height:100%属性即可。有一点要注意,如果父div是body的话,也就是说一个body套了一个div,让div适合body的大小的,必须设置body的高度才能实现子div随body改变而改变,body{height:100%}。

三、利用js脚本自动获取高度,从而赋予此div高度值

子div

通过以上代码可以实现“子div”的高度通过js获取另个子div段落的高度,同时赋值给第一个子div,以此保持两个子div的高度一致。
效果如下:
cssdiv7.jpg
注意:以上为IE浏览器效果,谷歌浏览器下效果会忽略边框高度,如本文二中所说的。

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自Meteor's Blog,原文地址《div高度自适应不同效果分析
上一篇: DNSPOD免费注册.xyz域名一年教程 下一篇: Freenom开放免费注册.gq域名

已有 9 条评论

  1. 海胖子

    好系统!平时弄没系统学,都是尝试出来的,弄不出来就搜索。

    1. Meteor

      呵呵,我比你还烂啊,我也是不会了百度搜索的,慢慢学习的,还需要向你科班的学习才是啊。

  2. 香港虚拟主机

    站长你好,恒创科技买主机送平板,礼品有限,学生购买---9折加20%返现!!

  3. 幻杀博客

    正常评论来了个第三方

    1. Meteor

      不好意思,这都是评论过滤插件的问题,搞不懂有时可能就出问题。

  4. 微信公众号导航

    很不错的兼容性问题!

    1. Meteor

      感谢来访哈,已送IP

  5. 圣诞节祝福短信

    写的不错,加油哦
    圣诞节到了,圣诞节祝福短信 http://www.psdqw.com/jieri/shengdanjie/ 希望对你有用

    1. Meteor

      同乐同乐,感谢来访哈,已送IP

> 添加新评论

Copyright © Meteor's Blog / Theme by Ben & Meteor / Typecho))) / Admin / Sitemap /