前言

给父元素一个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. VS项目发布到本地IIS

    一.项目介绍 ①web项目,开发工具Visual Studio,语言C# ②本地IIS,手机上或其他用户在和本地在同一个局域网(并不绝对是指同一个WIFI)内访问,同时要把防火墙关掉 ③IIS全名In ...

  2. VisualStudio2017集成GitHub

    1 概述 通过使用VisualStudio2017来编写C语言版本的helloworld程序,然后上传至GitHub 2 VisualStudio2017安装GitHub插件 前提条件: 必须完成Vi ...

  3. linux下tomcat启动很慢的解决办法

    1.用vim编辑器打开tomcat的bin目录下的catalina.sh [root@iz09a32x1sghz3z bin]# vi /usr/local/src/java/tomcats/tomc ...

  4. ArcGIS for JavaScript学习（二）Server发布服务

    一 ArcGIS for Server 安装.配置 (1)双击setup (2)点击下一步完成安装 (3)配置 a 登录Manager 开始—>程序—>ArcGIS—>Manager ...

  5. 阿里云服务器部署Office online注意事项

    阿里云服务器部署Office online注意事项 一.参考配置 实例规格:4核8GB(IO优化) 网络带宽:5Mbps 系统盘:40G 存储盘:200G OS:Windows Server 2016 ...

  6. MVP模式, 开源库mosby的使用及代码分析

    Android中的构架模式一直是一个很hot的topic, 近年来Architecture components推出之后, MVVM异军突起, 风头正在逐渐盖过之前的MVP. 其实我觉得MVP还是有好 ...

  7. leetcode-48.旋转图像

    leetcode-48.旋转图像 point: 数组 题意 给定一个 n × n 的二维矩阵表示一个图像. 将图像顺时针旋转 90 度. 说明: 你必须在原地旋转图像,这意味着你需要直接修改输入的二维 ...

  8. 安装最新nodejs

    # apt-get update # apt-get install -y python-software-properties software-properties-common # add-ap ...

  9. ASP.NET Zero--前端应用程序

    前端应用程序 ASP.NET Zero包含可以作为您的公共网站或应用程序着陆页的起点的前端页面.首次运行项目时,您会看到主页如下所示: 这里有两页:主页和关于.这些页面的内容只是占位符和演示目的.您可 ...

  10. asp.net网页上获取其中表格中的数据（爬数据）

    下面的方法获取页面中表格数据,每个页面不相同,获取的方式(主要是正则表达式)不一样,只是提供方法参考.大神勿喷,刚使用了,就记下来了. 其中数据怎么存,主要就看着怎么使用了.只是方便记录就都放在lis ...