前言
在开发过程中,我们常常会遇到需要设置一个元素的高度为其祖父祖父元素高度的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
为灰色,则为隐式高度。
我们解释这么久显隐高度,为了什么?因为隐式高度,是无法被继承的。
这时候我们也可以用上诉方法来解决这个问题
感谢您的阅读,有不足之处请为我指出!