前言

给父元素一个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%，但实际上子元素高度你知道是多少吗？的更多相关文章

  1. 红黑树之 原理和算法详细介绍(阿里面试-treemap使用了红黑树) 红黑树的时间复杂度是O(lgn) 高度<=2log(n+1)1、X节点左旋-将X右边的子节点变成 父节点 2、X节点右旋-将X左边的子节点变成父节点

    红黑树插入删除 具体参考:红黑树原理以及插入.删除算法 附图例说明   (阿里的高德一直追着问) 或者插入的情况参考:红黑树原理以及插入.删除算法 附图例说明 红黑树与AVL树 红黑树 的时间复杂度 ...

  2. 使用 <embed> 标签显示 flash文件(swf)格式 ,如何设置 width 和 height 宽度,高度.

    1. embed 标签 支持  .swf 格式.     .flv 的不支持. 2. 通常情况下, 网站中上传 多个 flash文件. 它的默认大小是不一样的. 而且 可以 宽度 大于 高度(横向的) ...

  3. ueditor 设置高度height. ue.setHeight(400); 设置宽度 width

    1.引入的文件: <script type="text/javascript" src="../../dist/ueditor1_4_3-utf8-php/uedi ...

  4. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

  5. 各种高度的区别及height、clientHeight、scrollHeight、offsetHeight的区分

    1.height.clientHeight.scrollHeight.offsetHeight 我们来实现test中的onclick事件    function justAtest()    {    ...

  6. Canvas设置width与height 的问题！

    最近因为工作需要,所以就学了一下Html中的Canvas标签. 当我看了一下教程后,自己写了一个hello world的时候,麻烦事就出现了.看下面代码: <!DOCTYPE html> ...

  7. 元素设置position:fixed属性后IE下宽度无法100%延伸

    元素设置position:fixed属性后IE下宽度无法100%延伸 IE bug 出现条件: 1.div1设置position:fixed属性,并且想要width:100%的效果. 2.div2(下 ...

  8. contents() 查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容

    contents() V1.2概述 查找匹配元素内部所有的子节点(包括文本节点).如果元素是一个iframe,则查找文档内容   示例 描述:大理石平台检定规程 查找所有文本节点并加粗 HTML 代码 ...

  9. 使用 jQuery 选择器获取页面元素后，利用 jQuery 对象的 css() 方法设置其样式。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后, ...

随机推荐

  1. [PHP] 魔术方法__get __set __sleep __wakeup的实际使用

    1.__get __set是在给不可访问属性赋值和读取时,调用 2.__sleep 是在序列化对象的时候调用 3.__wakeup是在反序列化对象的时候调用 4.可以在序列化对象的时候 , 只序列化指 ...

  2. Java学习笔记之——异常处理

    1.异常: 在程序运行时,发生了一些错误导致程序不能正常结束或者中断 2.异常导致的后果 Java程序的执行过程中如果出现异常事件,可以生成一个异常类对象,该异常对象封装了异常事件的信息,并将其被提交 ...

  3. nginx系列1：认识nginx

    nginx介绍 nginx是什么呢?可以看下官方网站的定义: nginx [engine x] is an HTTP and reverse proxy server, a mail proxy se ...

  4. [LeetCode] 1. Two Sum 两数之和

    Part 1. 题目描述 (easy) Given an array of integers, return indices of the two numbers such that they add ...

  5. 如何解决angular不自动生成spec.ts文件

    "schematics":{   "@schematics/angular:component": {        "styleext": ...

  6. 诗人般的机器学习，ML工作原理大揭秘

    诗人般的机器学习,ML工作原理大揭秘 https://mp.weixin.qq.com/s/7N96aPAM_M6t0rV0yMLKbg 选自arXiv 作者:Cassie Kozyrkov 机器之心 ...

  7. [伟哥开源项目基金会](https://github.com/AspNetCoreFoundation)

    伟哥开源项目基金会 GitHub_base=> 伟哥开源项目基金会 该项目作者为伟哥,GitHub地址:https://github.com/amh1979: 该项目维护者为鸟窝,GitHub地 ...

  8. java设计模式——适配器模式 Java源代码

    前言:适配器模式就是把一个类的接口变换成客户端所能接受的另一种接口,从而使两个接口不匹配而无法在一起工作的两个类能够在一起工作.通常被用在一个项目需要引用一些开源框架来一起工作时,这些框架的内部都有一 ...

  9. 关于MongoDB时间格式转换和时间段聚合统计的用法总结

    一 . 背景需求 在日常的业务需求中,我们往往会根据时间段来统计数据.例如,统计每小时的下单量:每天的库存变化,这类信息数据对运营管理很重要. 这类数据统计依赖于各个时间维度,年月日.时分秒都有可能. ...

  10. Linux 查看进程消耗内存情况总结

    在Linux中,有很多命令或工具查看内存使用情况,今天我们来看看如何查看进程消耗.占用的内存情况,Linux的内存管理和相关概念要比Windows复杂一些.在此之前,我们需要了解一下Linux系统下面 ...