父元素高度设置为min-height，子元素高度设置为100%，但实际上子元素高度你知道是多少吗？
前言
给父元素一个min-height，子元素设置height:100%。
代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1{width: 100%;min-height: 50px;background-color: yellow;}
#sp1{width: 20%;height: 100%;display: inline-block;background-color: blue;}
#sp2{width: 50%;height: 100%;display: inline-block;background-color: red;}
</style>
</head>
<body>
<div id="div1">
<span id="sp1">aaa</span>
<spanv id="sp2">bbb</span>
</div>
</body>
</html>
结果
发现子元素高度并没有撑开，如下图：
如果我们稍作改变，将父元素的min-height改为height，子元素高度就会撑开，如下图：
剖析
min-height表示盒子的最小高度，并不表示盒子的最终高度，站在外部盒子的角度理解是外部最终高度是由盒子的内部元素的高度与当前盒子的最小高度共同决定。
在外部盒子等待内部元素计算出高度时并不知道自己的高度，内部盒子高度相对外部盒子设置高度时也未知外部高度，所以按照自己的内容的情况渲染了，最终的效果就是内部盒子高度与外部无关。
结论
子元素的 height 或是 min-height 百分比是否生效，基于父元素是否设置了固定高度或者是一个有效百分比高度，总结来说就是一个有效高度！！！
参考：剖析height百分比和min-height百分比
补充【2019-10-26】：
对子元素设置决定定位也可行即position:absolute
如果父元素的高度是auto，子元素的高度是百分比值，结果就是子元素的高度为0，原因同上，在进一步分析，规范中有提到：如果包含块的高度没有显示的指定（高度由内容决定），并且不是绝对定位元素，则计算值为auto，我们要知道高度和百分比值是没办法进行计算的！！！
auto * 100/100 = NaN
父元素高度设置为min-height，子元素高度设置为100%，但实际上子元素高度你知道是多少吗？的更多相关文章
- 红黑树之 原理和算法详细介绍(阿里面试-treemap使用了红黑树) 红黑树的时间复杂度是O(lgn) 高度<=2log(n+1)1、X节点左旋-将X右边的子节点变成 父节点 2、X节点右旋-将X左边的子节点变成父节点
红黑树插入删除 具体参考:红黑树原理以及插入.删除算法 附图例说明 (阿里的高德一直追着问) 或者插入的情况参考:红黑树原理以及插入.删除算法 附图例说明 红黑树与AVL树 红黑树 的时间复杂度 ...
- 使用 <embed> 标签显示 flash文件(swf)格式 ,如何设置 width 和 height 宽度,高度.
1. embed 标签 支持 .swf 格式. .flv 的不支持. 2. 通常情况下, 网站中上传 多个 flash文件. 它的默认大小是不一样的. 而且 可以 宽度 大于 高度(横向的) ...
- ueditor 设置高度height. ue.setHeight(400); 设置宽度 width
1.引入的文件: <script type="text/javascript" src="../../dist/ueditor1_4_3-utf8-php/uedi ...
- {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index
03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...
- 各种高度的区别及height、clientHeight、scrollHeight、offsetHeight的区分
1.height.clientHeight.scrollHeight.offsetHeight 我们来实现test中的onclick事件 function justAtest() { ...
- Canvas设置width与height 的问题！
最近因为工作需要,所以就学了一下Html中的Canvas标签. 当我看了一下教程后,自己写了一个hello world的时候,麻烦事就出现了.看下面代码: <!DOCTYPE html> ...
- 元素设置position:fixed属性后IE下宽度无法100%延伸
元素设置position:fixed属性后IE下宽度无法100%延伸 IE bug 出现条件: 1.div1设置position:fixed属性,并且想要width:100%的效果. 2.div2(下 ...
- contents() 查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容
contents() V1.2概述 查找匹配元素内部所有的子节点(包括文本节点).如果元素是一个iframe,则查找文档内容 示例 描述:大理石平台检定规程 查找所有文本节点并加粗 HTML 代码 ...
- 使用 jQuery 选择器获取页面元素后，利用 jQuery 对象的 css() 方法设置其样式。
查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后, ...
随机推荐
- 【学习笔记】非监督学习-k-means
目录 k-means k-means API k-means对Instacart Market用户聚类 Kmeans性能评估指标 Kmeans性能评估指标API Kmeans总结 无监督学习,顾名思义 ...
- 【大数据】了解Hadoop框架的基础知识
介绍 此Refcard提供了Apache Hadoop,这是最流行的软件框架,可使用简单的高级编程模型实现大型数据集的分布式存储和处理.我们将介绍Hadoop最重要的概念,描述其架构,指导您如何开始使 ...
- arcgis api 3.x for js 共享干货系列之二自定义 Navigation 控件样式风格（附源码下载）
0.内容概览 自定义 Navigation 控件样式风格 源码下载 1.内容讲解 arcgis api 3.x for js 默认的Navigation控件样式风格如下图:这样的风格不能说不好,各有各 ...
- Vsphere 回收未消使用的磁盘空间
下载sdelete.exe 执行 sdelete.exe -z E: ,然后又恢复为原可用空间 关机 SHH进入物理主机,找到对应的虚机文件 执行vmkfstools -K test-Win200 ...
- MongoDB的存储结构及对空间使用率的影响
MongoDB的存储结构及对空间使用率的影响 使用MongoDB一段时间的同学肯定会发现,MongoDB往往会占用比实际数据大小多不少空间的问题.如果利用db.stats()命令去查看,会发现Mong ...
- Android为TV端助力 完全解析模拟遥控器按键
public class VirturlKeyPadCtr { private static Instrumentation mInstrumentation; public static void ...
- C# 进程间通讯
扩展阅读:http://www.cnblogs.com/joye-shen/archive/2012/06/16/2551864.html 一.进程间通讯的方式 1)共享内存 包括:内存映射文件,共享 ...
- Python高级应用（3）—— 为你的项目添加验证码
验证码简介 验证码的作用: 验证码在现在来说,是很常见的东西,可以一定程度的保护网站,比如防止网络爬虫恶意爬取网站数据啊,减少低级的攻击啊什么的.但是高级点的骚操作还是不太好防范,所以现在的验证码平台 ...
- 【学习】Linux Shell脚本编程
1．脚本的组成和执行 Linux shell脚本的结构并不复杂,其主要由变量.内部命令以及shell的语法结构和一些函数.其他命令行的程序等组成,以下是一个简单的shell脚本. #!/bin/bas ...
- jQuery如何制作动画
下面为一组图片(四张)展示 1 2 3 4 页面代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...