携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情
今天还是接着之前的那个问题，因为昨天有点激动，文章只是把解决方法写了出来，忘记分析关键原因了，没有介绍不同高度的写法之间的区别和意义。今天稍微总结一下。
回顾一下代码(绝对不是凑字数)
写法一(不够完美)：
.el-aside {
height: calc(100% - 45px);
overflow: auto;
}
写法二(完美写法)：
.el-aside {
height: calc(100vh - 45px);
overflow: auto;
}
这两段样式代码中，唯一的区别就是 height 中计算高度的写法不同。不过我们先说一下另外一个设置———— overflow。
overflow
Overflow 属性，规定当内容溢出元素框时应该怎么办，即对溢出的内容的处理。它有以下几个属性值：
- visible(默认)：溢出内容可见，溢出内容不会被裁剪、遮挡，而是会呈现在元素狂之外；
- hidden：溢出内容被隐藏，溢出内容会被隐藏，而且不会有滚动条；
- scroll：溢出内容会被裁剪，但是在浏览器上会显示有滚动条，通过滚动条可以查看溢出的内容；
- auto：溢出内容会被裁剪，但是在浏览器上会显示有滚动条，通过滚动条可以查看溢出的内容；
(scroll 和 auto 虽然含义类似，也可以说一样，还是有细微区别的，不然也不会分两个属性值了：其中，
auto，只有当内容溢出后才会有滚动条出现，内容没有溢出，不会显示滚动条；而scroll，无论内容没有溢出，都会有滚动条。) - inherit：从父级继承 overflow 的属性值。
还有两个延申的有关滚动条的属性是 overflow-x 和 overflow-y，设置横向的滚动条和纵向的滚动条，属性值也是上面那几个。我这里采用 auto 就是想当页面放大，内容有溢出时，能够加载出滚动条，通过滚动条看到被裁剪的内容。
height
关于高度的属性，我以前就只知道直接设置像素 px 和 百分比 % 两种形式，这次之后，才了解还有一下几种属性：
- vh：相对于可视窗口的高度，可视窗口被均为成100个单位的 vh；
- vw：相对于可视窗口的宽度，可视窗口被均分成100个单位的 vw；
- vmax：相对于可视窗口的宽度或高度中
较大的那个，其中最大的那个被均分成100个单位的 vmax； - vmin：相对于可视窗口的宽度或高度中
较小的那个，其中最小的那个被均分成100个单位的 vmin；
而 100% 和 100vh 两者之间的区别就是：当元素没有内容时，如果高度设置 height:100%，该元素不会被撑开，此时高度仍然是0；而假若高度设置成 height:100vh，该元素会被撑开，达到跟屏幕高度一致。这一点很关键，因为如果是成 100% - 45px，高度减去太多的话，页面出现 漏掉一部分 的现象(如下图)，因为没有内容的元素不会被撑开，高度就是0；
但如果是 100vh - 45px，尽管减去了很大的像素，但没有内容的那一部分会被撑开到页面的高度，就看不出区别。
calc
再补充一下以上两种样式代码中都有的 calc，还是比较好理解的，就是一种计算。calc 是 CSS3 新增的一个功能，可以使用 calc() 给元素的 border、margin、padding、width 及 height 等属性设置动态值。
注意：
- calc() 支持加( + )、减( - )、乘( * )、除( / )基本运算，并且遵循数学中的运算优先级；
- calc() 中运算符前后保留一个空格，如：
height: calc(100vh - 45px);
大致总结了一下这几天这个问题的关键原因，一个高度的设置，搞了这么多天，还是不太熟练，多看多写。
希望本文章能够帮到你，如有错误，望指正。
我向你敬礼啊，Salute！
