一、兼容性

首先，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] Sort Transformed Array 变换数组排序

    Given a sorted array of integers nums and integer values a, b and c. Apply a function of the form f( ...

  2. [LeetCode] Binary Tree Level Order Traversal II 二叉树层序遍历之二

    Given a binary tree, return the bottom-up level order traversal of its nodes' values. (ie, from left ...

  3. DDR相关的低功耗技术之PASR、TCSR、DPD

    随着智能机的发展,DDR内存容量越来越大,bank数量越来越多,功耗也越来越大.在不需要的时候关闭部分bank,或者降低自刷新频率,或者进入深度低功耗模式.有三种DDR技术用来降低功耗: PASR(P ...

  4. ThreadPoolTimer -延迟执行, 周期执行

    介绍重新想象 Windows 8 Store Apps 之 线程池 通过 ThreadPoolTimer 实现延迟执行 通过 ThreadPoolTimer 实现周期执行 通过 ThreadPool ...

  5. Android 在线订单倒计时设计

        接到一个需求,用户下单后,商店这边需要显示在线订单列表,订单十分钟内有效.于是需要设计倒计时,显示每个订单剩余处理时间.       倒计时剩余时间: 订单创建时间 + 10分钟  - 系统当 ...

  6. console的花式用法

    1.百度的招聘启示 如图: 下面是输出代码: if(window.console){ var cons = console; if(cons){ cons.log("%c\n ", ...

  7. 架构师养成记--10.master-worker模式

    master-worker模式是一种并行计算模式,分为master进程和worker进程两个部分,master是担任总管角色,worker才是执行具体任务的地方. 总体流程应该是这样的: 具体一点,代 ...

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

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

  9. 你想要了解但是却羞于发问的有关SSL的一切

    Everything You Ever Wanted to Know About SSL (but Were Afraid to Ask) Or perhaps more accurately, &q ...

  10. EditPlus-CN使用总结

    EditPlus-CN使用总结 --------------- 注册名:Free User注册码:6AC8D-784D8-DDZ95-B8W3A-45TFA ---------------- 1.如何 ...