对height 100%和inherit的总结
对height 100%和inherit的总结
欢迎大家来我的博客留言：
https://sxq222.github.io/CSS%...
博客主页：
https://sxq222.github.io
正文：
之前看到一篇相关的文章：http://www.zhangxinxu.com/wor...
在看这个文章的demo时发现一些问题，下面来总结归纳一下:
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.outer{
display: inline-block;
width: 100px;
height: 100px;
background: #400;
border: 10px solid #444;;
}
.in{
background: #6aa;
}
.full{
height: 100%;
}
.inherit{
height: inherit;
}
</style>
</head>
<body>
<div class = 'outer'>
<div class = 'in full'>
</div>
</div>
<div class = 'outer'>
<div class = 'in inherit'>
</div>
</div>
</body>
</html>效果大致是这个样子：
其中，左边的是height 100%，右边的是height inherit。
下面我们进行一下改动：
<style>
.outer{
display: inline-block;
width: 100px;
height: 100px;
background: #400;
border: 10px solid #444;;
}
.in{
position: absolute;
background: #6aa;
width:100px;
}
.full{
height: 100%;
}
.inherit{
height: inherit;
}
</style>其实就是给两个子元素加上绝对定位。效果如图：
我们发现，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知识，弄明白这些现象背后的原因。
对height 100%和inherit的总结的更多相关文章
- height:100%与height：inherit的区别
一.兼容性 首先,inherit这个属性只是在ie8+才支持:100%支持ie6: 二.大多数情况下没有区别 在正常情况下height:100%与height:inherit没有任何区别: 1.父元素 ...
- height:100% 布局
常常会碰到需要填满整个浏览器,并且自适应高度的需求.首先肯定会想到给容器设定height:100%,但是会没有效果.原因是body没有高度,所以百分比无法生效. 解决方案:给html,body,标签都 ...
- 设置height:100%无效的解决方法
设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...
- 关于 iframe 在ie11 height:100% 无效的巨坑
好的,今天公司分配了个解决ie中的bug的任务,其中,有一个就是iframe 的高度 100% 没有生效的问题: 一开始,由于我真的没有怎么去了解过iframe这个货,所以,网上各种搜索一大堆关于这货 ...
- flex引起height:100%失效
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 父容器根据子容器高度自适应：设置父容器 height:100%;overflow:hidden;
父容器根据子容器高度自适应:设置父容器 height:100%;overflow:hidden;
- height:100%不起作用（无效），div全屏
当父容器是body时,height:100%不起作用(无效),解决办法:在css代码段中添加 html, body{ margin:0; height:100%; } 实现div全屏的时候需要上面那段 ...
- 如何让 height:100%; 起作用
当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果.你知道为什么height:100%不起作用吗? 按常理,当我们用 ...
- height:100%和height:auto的区别
一直不明白height:100%和height:auto的区别,最近在制作前端页面时都用了height:100%;overflow:hidden; ,可是有些浏览器出现莫名的奇妙的问题,但换成heig ...
随机推荐
- C++ 字符串 string
1.使用前应先包含头文件string.h,有的是cstring #include<string> 这样才能正确的cin和cout字符串. cin时,是按照空格.TAB和换行进行分割的 例如 ...
- js 把x,y轴两个数组变成[[x,y],[x,y]]的二维数组
例如有X轴数组xarr=[2006,2007,2008],Y轴数组yarr=[12,15,18],代码如下: //调用 mergexy([2006,2007,2008],[12,15,18]); // ...
- JZ-024-二叉树中和为某一值的路径
二叉树中和为某一值的路径 题目描述 输入一颗二叉树的根节点和一个整数,按字典序打印出二叉树中结点值的和为输入整数的所有路径.路径定义为从树的根结点开始往下一直到叶结点所经过的结点形成一条路径. 题目链 ...
- 用端口映射的办法使用矩池云隐藏的vnc功能
矩池云隐藏了很多高级功能待用户去挖掘. 租用机器 进入jupyterlab 设置vnc密码 VNC_PASSWD="userpasswd" ./root/vnc_startup.s ...
- SQL从零到迅速精通【规则和约束】
1.[创建规则] 为stu_info表定义一个规则,指定其成绩列的值必须大于0,小于100,输入语句如下. USE test_db; GO CREATE RULE rule_score AS @sco ...
- Netty异步Future源码解读
本文地址: https://juejin.im/post/5df771ee6fb9a0161d743069 说在前面 本文的 Netty源码使用的是 4.1.31.Final 版本,不同版本会有一些差 ...
- PHP命令执行集锦
前言 代码审计总要遇到命令执行或者说RCE,打CTF的过程中难免不会碰见,毕竟PHP是世界上最好的语言,总结一下 命令执行函数 E.g.1 <?php error_reporting(0); s ...
- 活用Windows Server 2008系统的几种安全功能
与传统操作系统相比,Win2008系统的安全防范功能更加强大,安全防护能力自然也是高人一等,我们只要在平时善于使用该系统新增的各项安全防范功能,完全可以实现更高级别的安全保护目的.现在,本文就为大家贡 ...
- [SPDK/NVMe存储技术分析]002 - SPDK官方介绍
Introduction to the Storage Performance Development Kit (SPDK) | SPDK概述 By Jonathan S. (Intel), Upda ...
- 七天接手react项目 系列 —— 尾篇（antd 和 mobx）
其他章节请看: 七天接手react项目 系列 尾篇 前面我们依次学习了 react 基础知识.react 脚手架创建项目.react 路由,已经花费了不少时间,但距离接手 spug_web 项目还有一 ...