对height 100%和inherit的总结

Tychio 发布于2019-08-30 14:07 / 1809人阅读

摘要：就算父元素未定位也是相对于直接父元素进行高度计算的。如果在绝对定位脱离文档流中，等于最近已定位父元素的的高度。下一步目前只是阐述和总结了现象，还未解释原理，希望大神能在留言区指点一下。接下来需要继续学习知识，弄明白这些现象背后的原因。

对height 100%和inherit的总结

欢迎大家来我的博客留言：
https://sxq222.github.io/CSS%...
博客主页：
https://sxq222.github.io

正文：

之前看到一篇相关的文章：http://www.zhangxinxu.com/wor...

在看这个文章的demo时发现一些问题，下面来总结归纳一下:

代码如下




    
    demo

效果大致是这个样子：

其中，左边的是height 100%，右边的是height inherit。

下面我们进行一下改动：

其实就是给两个子元素加上绝对定位。效果如图：

我们发现，100%的元素的高度计算是相对于父元素的了。这也比较容易理解，因为绝对定位的元素，他的计算规则是相对于他最近的position不为static的元素。就算父元素未定位inherit也是相对于直接父元素进行高度计算的。

我们在outer上加上position relative 试一试：

        .outer{
            position: relative;
            display: inline-block;
            width: 100px;
            height: 100px;
            background: #400;
            border: 10px solid #444;;
        }

看来确实是这样的，现在100%和inherit效果是一样的.

再对css进行改动：

        .outer{
            display: inline-block;
            width: 100px;
            height: 100px;
            background: #400;
            border: 10px solid #444;
            box-sizing: border-box;
        }
        .in{
            background: #6aa;
        }
        .full{
            height: 100%;
        }
        .inherit{
            height: inherit;
        }

我们给父元素加上了boxsizing border box，让父元素的高度计算规则改变，下面看看效果：

我们看到 inherit元素的高度变成了父元素的高度，而100%的元素。

我们再给父元素加上padding：

        .outer{
            display: inline-block;
            width: 100px;
            height: 100px;
            background: #400;
            border: 10px solid #444;
            box-sizing: border-box;
            padding: 10px;
        }

效果图：

可以看到inherit的高度会与父元素的高度相等，而100%的高度会与父元素content相等。

下面我们给子元素加上绝对定位看看：

        .outer{
            position: relative;
            display: inline-block;
            width: 100px;
            height: 100px;
            background: #400;
            border: 10px solid #444;
            box-sizing: border-box;
            padding: 10px;
        }
        .in{
            left: 0;
            top: 0;
            position: absolute;
            width: 50px;
            background: #6aa;
        }
        .full{
            height: 100%;
        }
        .inherit{
            height: inherit;
        }

效果图：

我们看到，当加上绝对定位时，100%的子元素的高度为：父元素的（content + padding），而inherit的高度就是等于父元素的border-box高度。

下面我们将父元素outer的borde -box 改回去：

        .outer{
            position: relative;
            display: inline-block;
            width: 100px;
            height: 100px;
            background: #400;
            border: 10px solid #444;
            /* box-sizing: border-box; */
            padding: 10px;
        }

效果图：

可以看到，inherit的高度变为父元素content-box的高度。

下面看一看固定定位：

        .outer{
            position: relative;
            display: inline-block;
            width: 100px;
            height: 100px;
            background: #400;
            border: 10px solid #444;
            /* box-sizing: border-box; */
            padding: 10px;
        }
        .in{

            position: fixed;
            width: 50px;
            background: #6aa;
        }
        .full{
            left:300px;
            top: 0;
            height: 100%;
        }
        .inherit{
            left: 0;
            top: 0;
            height: inherit;
        }

可以看到，inherit的高度还是等于父元素盒子模型的高度，而100%的高度变为了视口的高度。

总结

height:inherit的高度，总是等于父元素的盒子模型（content-box、border-box）的高度。

heighe:100%的高度，在文档流中，就等于父元素的content的高度。如果在绝对定位（脱离文档流）中，等于最近已定位父元素的content + padding的高度。在固定定位中，等于视口的高度。

下一步

目前只是阐述和总结了现象，还未解释原理，希望大神能在留言区指点一下。

一开始觉得自己很熟悉CSS的定位、盒子模型，但是现在发现很多东西都是不明白的，这方面的只是还需要深入理解。接下来需要继续学习CSS知识，弄明白这些现象背后的原因。

专线服务服务器托管云服务器和挖矿的区别 1对1服务 inherit() Inherits inheritance

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115783.html

CSS background系列属性

摘要：通过该属性可以控制绘制的区域。背景图片相关的属性背景图片本身是有自身尺寸的，被应用元素也有自己的尺寸。通过属性可以修改原点位置。坐标系的反方向都是重复方式绘制。该位置是相对于原点构建的坐标系，默认情况下该位置就是在原点。一、元素背景是指哪些区域默认情况下元素的背景是指元素border（包含border）以内的区域。 showImg(https://segmentfault.com/...

mrcode 2019-08-29 17:30 评论0 收藏0
前端笔记：左右结构中，如何做到左右高度自适应？

摘要：优点实现简单，父容器不用设置具体高度值缺点依然存在需要清除浮动的举动，因为父容器没有设置方案三使用来实现优点将父容器的设置为，将子元素设置为，让左右结构表现为一样，那么就具有的一些特性列高度自适应上下居中等等。相信大家一看到这个题目，有些同学就会叫到：我也遇到过这样的问题！，这具体是什么问题呢？有这样一种页面结构： left ...

gyl_coder 2019-08-30 13:09 评论0 收藏0
html5文件上传断点续传

摘要：最近公司要做一个上传的插件，要在下先实现功能，要求显示上传进度，文件信息，断点续传等等。我一看，艾玛，没做过啊。没办法，，只能去查资料了。作为一名还未毕业的大学僧，本人表示亚历山大。不过还好是做出来了，不敢说代码写得很好，大家将就着看吧。最近公司要做一个html5上传的jquery插件，要在下先实现功能，要求显示上传进度，文件信息，断点续传等等。我一看，艾玛！Σ(ﾟдﾟlll)，没做...

tianlai 2019-08-21 10:35 评论0 收藏0
html5文件上传断点续传

摘要：最近公司要做一个上传的插件，要在下先实现功能，要求显示上传进度，文件信息，断点续传等等。我一看，艾玛，没做过啊。没办法，，只能去查资料了。作为一名还未毕业的大学僧，本人表示亚历山大。不过还好是做出来了，不敢说代码写得很好，大家将就着看吧。最近公司要做一个html5上传的jquery插件，要在下先实现功能，要求显示上传进度，文件信息，断点续传等等。我一看，艾玛！Σ(ﾟдﾟlll)，没做...

oogh 2019-08-02 18:15 评论0 收藏0
html5文件上传断点续传

摘要：最近公司要做一个上传的插件，要在下先实现功能，要求显示上传进度，文件信息，断点续传等等。我一看，艾玛，没做过啊。没办法，，只能去查资料了。作为一名还未毕业的大学僧，本人表示亚历山大。不过还好是做出来了，不敢说代码写得很好，大家将就着看吧。最近公司要做一个html5上传的jquery插件，要在下先实现功能，要求显示上传进度，文件信息，断点续传等等。我一看，艾玛！Σ(ﾟдﾟlll)，没做...

sixleaves 2019-06-27 11:21 评论0 收藏0