css奇技淫巧——优雅的消除height：100%继承地狱

发表于

前言

在开发过程中，我们常常会遇到需要设置一个元素的高度为其祖父祖父元素高度的100%的需求。

如果按常规方法：

image.png
这代码，优雅与否咱先不说，但凡有点代码洁癖，一定看着很难受吧

这篇博客将演示如何优雅的解决height: 100%继承地狱

正文

解决这个问题的关键在于:

绝对定位元素的高度是相对于其最近的定位祖先元素，而不是其直接的父元素。`

首先我们将有原始高度的.app元素设置为定位元素

1
2
3
4
5
6
7
css复制代码.app {
  height: 100px;
  width: 100px;
  border: 1px solid;
  /* 关键代码 */
  position: relative;
}

然后将目标元素设置为绝对定位元素

1
2
3
4
5
6
7
css复制代码.div4{
  height: 100%;
  border: 1px solid red;
  /* 关键代码 */
  position: absolute;
  width: 100%
}

最终效果

image.png

这个技巧允许我们优雅地解决height: 100%的继承问题，避免了不必要的复杂性和代码混乱。虽然这个技巧并不能适用于所有的场景，但在大多数情况下，它能够提供一个快捷和有效的解决方案。

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
html复制代码<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
css复制代码.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

1
2
3
css复制代码.box {
  height: 150px;
}

在这个例子中，在类名为 “box” 的元素中显式地设置了高度为150px。

隐式高度：如果没有设置元素的显式高度，或者如果元素的高度设置为 “auto”，那么元素的高度将依赖于元素中的内容来决定。这就是所谓的隐式高度。

例如：

html

1
2
3
xml复制代码<div class="container">
  <p>这是一段文字。</p>
</div>

在这个例子中， “.container” 的高度将取决于其中的 <p> 标签内容的高度，因此它具有隐式的高度。

最简单，高效判断显隐高度的方法

打开控制台，样式查看切换至Computed

image.png

只要height为灰色，则为隐式高度。

我们解释这么久显隐高度，为了什么？因为隐式高度，是无法被继承的。

这时候我们也可以用上诉方法来解决这个问题

image.png

感谢您的阅读，有不足之处请为我指出！

本文转载自: 掘金

开发者博客 – 和开发相关的 这里全都有

0%