一、兼容性

首先，inherit这个属性只是在ie8+才支持；100%支持ie6；

二、大多数情况下没有区别

在正常情况下height：100%与height：inherit没有任何区别；

1.父元素：height：auto；height：100%与inherit也都是auto；

2.父元素定高：height：100px; height:100%与inherit也都是100px；

三、绝对定位情况下大不同

如果子元素为绝对定位元素，则height：100%；参考的父级是离它最近的有定位属性的父级而非直接父级；

但是此时height：inherit；参考的依旧是直接父级，无论直接父级是否有定位属性；

参考demo；

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .wrap{

            width: 300px;

            height: 300px;

            border:5px solid red;

        }

        .box{

            width: 200px;

            height: 200px;

            border:5px solid yellow;

        }

        .child{

            width: 100px;

            height: 100px;

            border:5px solid blue;

        }

        .margin{

            top:50px;

            left:50px;

        }

        .abs{

            position:absolute;

        }

        .rel{

            position: relative;

        }

    </style>

</head>

<body>

    <div class="wrap">

        <div class="box">

            <div class="child abs"></div>

        </div>

    </div>

</body>

</html>

height:100%与height：inherit的区别的更多相关文章

  1. height:100%和height:auto的区别

    一直不明白height:100%和height:auto的区别,最近在制作前端页面时都用了height:100%;overflow:hidden; ,可是有些浏览器出现莫名的奇妙的问题,但换成heig ...

  2. css height:100%和height:auto的区别

    css height:100%和height:auto的区别 height:auto,是指根据块内内容自动调节高度.height:100%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高 ...

  3. jQuery中的height()、innerheight()、outerheight()的区别总结

    在前端jQuery代码中突然看到outerheight(),第一感觉就是,这是什么鬼?然后仔细查阅了一下,居然发现还有这么多相似的东西. 在jQuery中,获取元素高度的函数有3个,它们分别是heig ...

  4. height:100% 布局

    常常会碰到需要填满整个浏览器,并且自适应高度的需求.首先肯定会想到给容器设定height:100%,但是会没有效果.原因是body没有高度,所以百分比无法生效. 解决方案:给html,body,标签都 ...

  5. flex引起height:100%失效

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. css设置height 100%

    需要显式设置html,body为100%,body是相对于html,wrapper是相对于body html,body{ height: 100%; } .wrapper{ height: 100; ...

  7. height:100%失败

    height显然,设置100% 为什么不能看到效果.非常多的时间不是很扎实的时间的基础上,,经常会遇到这样的问题,原因很简单的事实 首先,你必须确保 html{height:100%;} body{h ...

  8. css top,right,bottom,left设置为0有什么用？它和width:100%和height:100%有什么区别？

     壹 ❀ 引 当我们使用position属性时,总免不了与top,left,right,bottom四个属性打交道,那么这四个属性都设置为0时有什么用,与宽高设置100%又有什么区别?本文对此展开讨论 ...

  9. 对height 100%和inherit的总结

    对height 100%和inherit的总结 欢迎大家来我的博客留言:https://sxq222.github.io/CSS%...博客主页:https://sxq222.github.io 正文 ...

随机推荐

  1. [原]CentOS7部署osm2pgsql

    转载请注明原作者(think8848)和出处(http://think8848.cnblogs.com) 部署Postgresql和部署PostGis请参考前两篇文章 本文主要参考GitHub上osm ...

  2. [LeetCode] Best Time to Buy and Sell Stock IV 买卖股票的最佳时间之四

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  3. WPF仿百度Echarts人口迁移图

    GitHub地址:https://github.com/ptddqr/wpf-echarts-map/tree/master 关于大名鼎鼎的百度Echarts我就不多说了 不了解的朋友直接看官方的例子 ...

  4. 星云opencv总结

  5. Android国际化--I18N

    在res下创建对应国家的环境的目录如:values-zh,values-en,然后在对应的目录下将对应的字符串翻译成对应国家的语言即可.

  6. 冰冻三尺非一日之寒--web框架Django

    1.JS 正则    test   - 判断字符串是否符合规定的正则        rep = /\d+/;        rep.test("asdfoiklfasdf89asdfasdf ...

  7. BZOJ1257 [CQOI2007]余数之和sum

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  8. 关于 m4 文本处理引擎

    使用 m4 开源项目还是挺多的,之前看到都有的怕怕的,选择自动略过.今天鼓起勇气来学习一波. 首先 m4 processor 是一个“宏定义”处理器,也就是说,他是一个纯粹的文本处理器,干些管理模板, ...

  9. Java加载资源文件几种方法

    from: http://andyzhu.blog.51cto.com/4386758/775836/ import java.net.URL; import org.springframework. ...

  10. Xamarin.ios 重新定位视图

    //旋转手机重新定位视图 /// <summary> /// 重新定位视图 /// </summary> /// <param name="toInterfac ...