前言

给父元素一个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] strpos stripos strrpos strripos的区别

    stripos — 查找字符串首次出现的位置(不区分大小写),应使用 === 运算符来测试此函数的返回值 strpos 左边开始字符出现的第一个位置,区分大小写stripos 和上面一样,不区分大小写 ...

  2. Java开发笔记（七十一）容器工具Collections

    清单作为一组数据的有序队列,它在组织形式上与数组有着某些异曲同工之处,数组有专门的数组工具Arrays来进行加工操作,照理清单也应该配备对应的清单工具.当然容器这个大家族确实拥有自己的容器工具Coll ...

  3. 如何清理Docker占用的磁盘空间?

    摘要:用了 Docker,好处挺多的,但是有一个不大不小的问题,它会一不小心占用太多磁盘,这就意味着我们必须及时清理. 作为一个有信仰的技术公司,我们Fundebug的后台采用了酷炫的全 Docker ...

  4. 【代码笔记】Web-CSS-CSS Display

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  5. 谷歌AI涉足艺术、太空、外科手术，再强调AI七原则

    谷歌AI涉足艺术.太空.外科手术,再强调AI七原则 https://mp.weixin.qq.com/s/MJG_SvKCEBKRvL3IWpL0bA 9月18日上午,Google在上海的2018世界 ...

  6. C++ 死循环在语言层面的检测

    英文概念 Infinite loop without side-effects 这个目前只有CLang实现了这个C++特色 #include <iostream> int 费马定理() { ...

  7. EventBus中观察者模式的应用

    一 介绍 EventBus是一款安卓的开源消息传递框架,地址:https://github.com/greenrobot/EventBus android系统的消息传递非常复杂,比如activity和 ...

  8. git清空版本记录

    在网上找的,记录下来自己使用 1.新增分支 git checkout --orphan latest_branch 2. 添加问题 git add -A 3. 提交 git commit -am &q ...

  9. MySQL 基础知识梳理学习（二）----记录在页面层级的组织管理

    1.InnoDB的数据存储结构 InnoDB中数据是通过段.簇.页面构成的. (1)段是表空间文件中的主要组织结构,它是一个逻辑概念,用来管理物理文件,是构成索引.表.回滚段的基本元素.创建一个索引( ...

  10. centos7操作记录

    /root/wang/shell  存放练习的shell文件,快捷命令wsh(alias  wsh='cd /root/wang/shell') /root/wang/OS_bak  存放系统备份文件 ...