对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 ...
随机推荐
- net core or Linux
某用户执行net core sdk 版本不生效 sudo chmod +x /home/username/netcore3.1sdk/dotnet //某个用户执行新版本net core sdk
- 超好用的Markdown编辑器Typora中的常见语法
目录 下载网址 安装 一.标题 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 二.语法环境 三.单选 四.字体 五.分割符 六.列表 七.图片引入 八.表格 九.超链接 下载网址 正版中 ...
- windows下安装gym
安装gym在执行pip install -e'.[all]'这句语句时,可能会出现这种情况 在pycharm中运行的时候会出现如下这种情况: 或者这种情况 出现这种问题可能是python的版本太高了, ...
- 关于Union和 Union all，以及出现 ORA-12704:字符集不匹配问题
一.Union和 Union all 1.Union 对两个结果集进行并集操作: 对结果进行去重操作,不包括重复行: 并进行默认排序. -----效率相对较低 2.Union all 对两个结果集进行 ...
- ESXI 虚拟化误删除管理端口Management Network (vmk0)，导致无法访问后台解决方案
按F2开启控制台shell,启用后返回.按Alt+F1打开终端. 输入 esxcfg-vmknic -a -i 192.168.1.10 -n 255.255.255.0 "Manageme ...
- 1. 查看NGINX是否在运行.
1. 查看NGINX是否在运行. ps aux | grep nginx [root@bogon /]# ps aux | grep nginx root 2318 0.0 0.0 56816 127 ...
- docker 部署mysql tomcat时 在root@localhost~下——-——docker exec -it 容器名 /bin/bash 报错
在docker部署mysql时 报错 找不到 容器不自动启动 , docker start 容器名 也没有效果 多次尝试发现 原因是创建容器时在 下面创建的 更改为下创建 问题解决
- 使用Spring Data ElasticSearch+Jsoup操作集群数据存储
使用Spring Data ElasticSearch+Jsoup操作集群数据存储 1.使用Jsoup爬取京东商城的商品数据 1)获取商品名称.价格以及商品地址,并封装为一个Product对象,代码截 ...
- Linux配置FTP（vsftpd）服务和无法上传下载问题解决
vsftpd的配置说明 ftp的配置文件主要有三个,位于/etc/vsftpd/目录下,分别是: ftpusers 该文件用来指定那些用户不能访问ftp服务器. user_list 该文件用来指示的默 ...
- 解决Ubuntu虚拟机占用空间与实际空间不符问题
1.背景 右键点击Windows中的Ubuntu虚拟机文件夹,发现它占用Windows磁盘空间大小140GB: 然后进入Ubuntu,输入 df -hl 可以算出实际占用空间也大约为140GB.在Ub ...