一、兼容性

首先，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. rxjs5.X系列 —— filter系列 api 笔记

    欢迎指导与讨论 :) 前言 本文是笔者翻译 RxJS 5.X 官网各类operation操作系列的的第二篇 -- filter转换.如有错漏,希望大家指出提醒O(∩_∩)O.更详细的资料尽在rxjs官 ...

  2. i3wm配置

    使用安装需要的软件配置按键壁纸和锁屏随机壁纸电源管理终端托盘图标美化 使用 安装 安装i3wm,一般包名叫做i3,包含i3-wm,i3lock和i3status. 在i3wm-config页面下载本配 ...

  3. linux基础-磁盘阵列(RAID)实例详解

    磁盘阵列(RAID)实例详解 raid技术分类 软raid技术 硬raid技术 Raid和lvm的区别 为什么选择用raid RAID详解 RAID-0 RAID-1 RAID-5 Raid-10 R ...

  4. Java的基本数据类型与转换

    1.1 Java为什么需要保留基本数据类型 http://www.importnew.com/11915.html 基本数据类型对大多数业务相关或网络应用程序没有太大的用处,这些应用一般是采用客户端/ ...

  5. [转]CSS如何设置html table表格边框样式

    原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...

  6. jQuery ui autocomplete 与easyUI冲突解决办法（重命名ui的autocomplete 和menu部分）

    http://jqueryui.com/download/   UI定制只选autocomplete 会自动把依赖的menu模块也加入进来--然而easyUI也有自己的menu,于是就-- 折腾了好久 ...

  7. 学习ASP.NET 5和MVC6

    今天很荣幸的参加了微软开源跨平台讲座,充分认识了下一个版本的ASP.NET所带来的激动人心的特性.虽然过去已经断断续续的了解了一些ASP.NET5和MVC6与EF7的动态,但是都没有这一次来的系统化( ...

  8. 浅析 Android 的窗口

    来源:http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=555&fromuid=6   一.窗口的概念 在开发过程中,我们经常会 ...

  9. JavaScript事件详解-Zepto的事件实现（二）【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  10. a new Poster