父元素高度设置为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() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后, ...
随机推荐
- Java基础：HashMap假死锁问题的测试、分析和总结
前言 前两天在公司的内部博客看到一个同事分享的线上服务挂掉CPU100%的文章,让我联想到HashMap在不恰当使用情况下的死循环问题,这里做个整理和总结,也顺便复习下HashMap. 直接上测试代码 ...
- （二）阿里云ECS Linux服务器外网无法连接MySQL解决方法（报错2003- Can't connect MySQL Server on 'x.x.x.x'(10038)）（自己亲身遇到的问题是防火墙的问题已经解决）
我的服务器买的是阿里云ECS linux系统.为了更好的操作数据库,我希望可以用navicat for mysql管理我的数据库. 当我按照正常的模式去链接mysql的时候, 报错提示: - Can' ...
- 简单介绍Tomcat
Tomcat是一个Web容器,或者说是Web服务器.用于管理和部署Web应用.还有一种服务器叫做应用服务器,它的功能比web服务器要强大的多,因为它可以部署EJB应用,可以实现容器管理的事务,一般的应 ...
- 22 , CSS 构造颜色、背景与图像
1. 设定颜色 2. 背景使用 3. 图像使用 1.设定颜色 红色的几种合法定义; #f00; #ff0000; Red; Rgb(255,0,0); Rgb(100%,0%,0%); 2.十六进制三 ...
- 01-css的引入方式
[转]01-css的引入方式 引入css方式(重点掌握) 行内样式 内接样式 外接样式 3.1 链接式 3.1 导入式 css介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述 ...
- 【代码笔记】Web-CSS-CSS Padding（填充）
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- JDBC操作MySQL数据
对原始jdbc进行封装 package com.utils; import java.sql.Connection; import java.sql.DriverManager; import jav ...
- SQL语句更新时间字段的年份、月份、天数、时、分、秒
SQL语句更新时间字段的年份.月份.天数.时.分.秒 --修改d表日期字段的年份update dset birth=STUFF(convert(nvarchar(23),birth,120),1,4, ...
- 什么是TLB?
TLB:Translation Lookaside Buffer. 根据功能可以译为快表,直译可以翻译为旁路转换缓冲,也可以把它理解成页表缓冲.里面存放的是一些页表文件(虚拟地址到物理地址的转换表). ...
- Linux内存描述之内存节点node--Linux内存管理(二)
1 内存节点node 1.1 为什么要用node来描述内存 这点前面是说的很明白了, NUMA结构下, 每个处理器CPU与一个本地内存直接相连, 而不同处理器之前则通过总线进行进一步的连接, 因此相对 ...