一、兼容性

首先，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. [LeetCode] Range Addition 范围相加

    Assume you have an array of length n initialized with all 0's and are given k update operations. Eac ...

  2. [LeetCode] Merge Intervals 合并区间

    Given a collection of intervals, merge all overlapping intervals. For example, Given [1,3],[2,6],[8, ...

  3. 百度广告 高亮 Chrome插件(附源码)

    一前言 百度最近是上了舆论头条了,相信中过百度毒的人对百度都反感.百度自己挖了这么多坑,终究还是要自己来填.国内网民使且最频繁的搜过 还是以百度为主,而百度依靠这种市场占有率靠他的广告竞价排名大发横财 ...

  4. c#线程带参数

    c#线程带参数 ThreadStart threadStart = delegate { LoadPicture(ds.Tables[0]); }; Thread thread = new Threa ...

  5. CURL HELP

    CURL下载 在windows的系统环境变量中,将CURL的路径(curl.exe存放的路径)复制到"Path"变量的结尾 Usage: curl [options...] < ...

  6. maven

    maven常见问题问答 1.前言 Maven,发音是[`meivin],"专家"的意思.它是一个很好的项目管理工具,很早就进入了我的必备工具行列,但是这次为了把project1项目 ...

  7. 冰冻三尺非一日之寒--Django框架【进阶篇】

    第十九章  Django进阶 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接数据库,并编写数据访问层代码 业务逻辑层去 ...

  8. 【USACO 3.2】Spinning Wheels（同心圆旋转）

    题意: 5个同心圆,告诉你角速度,每个圆有1至5个楔,告诉你起点和宽度.求最早时间如果有的话使得存在某个角度经过5个圆的楔. 题解: 最重要的是要意识到,360秒钟后,每个圆都回到了原来的位置. 我的 ...

  9. HTML5学习总结-番外04 Cordova/PhoneGap

    一 PhoneGap 1 PhoneGap简绍 http://www.cnblogs.com/JustRun1983/p/3819433.html 2 环境安装 http://cordova.apac ...

  10. 12,13 Proxy和Reflect

    Proxy和Reflect Proxy(代理) Proxy用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种"元编程"(meta programming),即对编程 ...