前言
在开发过程中，我们常常会遇到需要设置一个元素的高度为其祖父祖父元素高度的100%的需求。
如果按常规方法：
这代码，优雅与否咱先不说，但凡有点代码洁癖，一定看着很难受吧
这篇博客将演示如何优雅的解决height: 100%继承地狱
正文
解决这个问题的关键在于:
绝对定位元素的高度是相对于其最近的定位祖先元素，而不是其直接的父元素。`
首先我们将有原始高度的.app元素设置为定位元素
.app {
height: 100px;
width: 100px;
border: 1px solid;
/* 关键代码 */
position: relative;
}
然后将目标元素设置为绝对定位元素
.div4{
height: 100%;
border: 1px solid red;
/* 关键代码 */
position: absolute;
width: 100%
}
最终效果
这个技巧允许我们优雅地解决height: 100%的继承问题，避免了不必要的复杂性和代码混乱。虽然这个技巧并不能适用于所有的场景，但在大多数情况下，它能够提供一个快捷和有效的解决方案。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
<div class="app">
<div class="div1">
<div class="div2">
<div class="div3">
<div class="div4"></div>
</div>
</div>
</div>
</div>
</body>
</html>
.app {
height: 100px;
width: 100px;
border: 1px solid;
/* 关键代码 */
position: relative;
}
.div4{
height: 100%;
border: 1px solid red;
/* 关键代码 */
position: absolute;
width:100%;
}
知识扩展
首先我们了解一下隐式高度和显式高度
显式高度：当你通过 CSS 直接为一个元素设置高度时，这个高度就是显式高度。显式高度可以通过像 “height” 或 “max-height” 这样的 CSS 属性来设置。
例如：
css
.box {
height: 150px;
}
在这个例子中，在类名为 "box" 的元素中显式地设置了高度为150px。
隐式高度：如果没有设置元素的显式高度，或者如果元素的高度设置为 "auto"，那么元素的高度将依赖于元素中的内容来决定。这就是所谓的隐式高度。
例如：
html
<div class="container">
<p>这是一段文字。</p>
</div>
在这个例子中， ".container" 的高度将取决于其中的 <p> 标签内容的高度，因此它具有隐式的高度。
最简单，高效判断显隐高度的方法
打开控制台，样式查看切换至Computed
只要height为灰色，则为隐式高度。
我们解释这么久显隐高度，为了什么？因为隐式高度，是无法被继承的。
这时候我们也可以用上诉方法来解决这个问题
感谢您的阅读，有不足之处请为我指出！