在我们的网页中有一个固定区域，这个区域会用于渲染从后端拉取的含有图片等资源的富文本字符串。他需要在内容不超过一个最大高度的时候完全显示所有内容，超过最大内容后仅展示最大高度范围内的内容

父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷，父元素的高度一旦塌陷所有元素的位置将会上移

高度不去设置，或者高度设置auto 内容撑开父元素的高度。内容撑开父元素的高度 -> 最小高度的设置 min-height，浮动元素添加高度自适应 -> 添加浮动元素的父元素没有高度，会出现高度塌陷

给高度塌陷的元素设置overflow:hidden;原理：因为overflow:hidden;触发了一个BFC,BFC布局规则：计算BFC高度的时候，里面的浮动元素也参与计算。弊端：定位在当前元素外面的内容会被隐藏。

有时候，我们一进入页面，就需要获取display为none元素的物理尺寸（宽高），或获取display为none元素的子元素的物理尺寸（宽高），本篇文章就如何解决以上问题给出自己的解决方案，获取display为none元素的子元素的物理尺寸

先了解一下CSS3的相对长度单位：相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用,通过vh / vw 我们可以获得当前屏幕的视窗宽度