一、兼容性

首先，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. BZOJ 4008 【HNOI2015】 亚瑟王

    题目链接:亚瑟王 这道题好神啊TAT--果然我的dp还是太弱了-- 一开始想了半天的直接dp求期望,结果最后WA的不知所云-- 最后去翻了题解,然后发现先算概率,再求期望--新姿势\(get\). 我 ...

  2. 唯物 VS 唯心

    对于唯物和唯心,我了解的并不多.我所知道的那点皮毛,也只是源于教课书.只是近来恋上了阳明大哥,而在某年的高考模拟题中,阳明竟被作为唯心主义的代表,供考生们批判.这一批搞得我着实不爽,决定要为他平反   ...

  3. weblogic的集群与配置

    目录(?)[-] 1.Weblogic的集群 2.创建Weblogic集群前的规划 3.开始创建我们的Weblogic集群 1.1 创建集群的总控制端aminserver 2.2 创建集群中的节点my ...

  4. [LeetCode] Sum of Two Integers 两数之和

    Calculate the sum of two integers a and b, but you are not allowed to use the operator + and -. Exam ...

  5. [LeetCode] First Bad Version 第一个坏版本

    You are a product manager and currently leading a team to develop a new product. Unfortunately, the ...

  6. [LeetCode] Linked List Cycle 单链表中的环

    Given a linked list, determine if it has a cycle in it. Follow up: Can you solve it without using ex ...

  7. sublimetext3中保存代码片段

    在日常的开发工作中,不断重复上一次敲过的代码,有时确实感到伐木累."蓝瘦"(难受)."香菇"(想哭),大概表达的也是这样的心境吧!:grinning: 所以,在 ...

  8. ceph hadoop spark 大数据处理

    http://docs.ceph.com/docs/giant/cephfs/hadoop/ https://indico.cern.ch/event/524549/contributions/218 ...

  9. django -model

    Model 属性 STATUS=( (0,"正常"), (-1 ,"删除") ) Choices =STATUS  //是用户处理数据返回参数做处理 如果增加了 ...

  10. windows server 2008 各版本号下载地址（微软官网）

    前言: 微软官网上下载系统的镜像文件要远比百度网盘下载起来得更快. Windows Server 2008 32-bit Standard(标准版)