高度继承不适用于绝对位置

Question

我有一个绝对元素，那就是背景。我无法将它设置为 div 的背景，因为它是动画的并且需要 2 css classes。我把它简化了，让你明白问题所在。

我想将这个绝对元素的高度设置为与其父元素相同，它包含所有其他元素，到达页面底部。所以我用作背景的这个绝对元素应该覆盖所有背景页面，但继承不起作用。

我也试过 height:100% 但没用。仅当我手动设置高度时它才有效，但这样做没有响应。

.stars {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:inherit;
  height:inherit;
  display:block;
}

.stars {
  background:#000 url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
  z-index:0;
}
        
.main-content {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.home-container {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
  z-index: 5;
}

.genericDiv1, .genericDiv2, .genericDiv3 {
  width: 200px;
  height: 200px;
}

.genericDiv1 {
  background-color:#f00;
}

.genericDiv2 {
  background-color:#00ff76;
}

.genericDiv3 {
  background-color:#2900ff;
}

<body>
   <div class="main-content">
      <div class="stars"></div>
      <div class="home-container">
         <div class="genericDiv1"></div>
         <div class="genericDiv2"></div>
         <div class="genericDiv3"></div>
      </div>
   </div>
</body>

我想说明的是，如果我将 .main-content class 设置为特定高度，它就会起作用。但是正如我之前所说，这种方式是没有响应的。

Answer 1

请在您的 css 中试试这个： ‌‌‌
-从 .main-content 中删除 height : 100% 并添加 height:100vh ‌‌‌‌‌

-添加一个position:relative到.main-content

告诉我发生了什么事。

Answer 2

要解决此问题，您需要 通过相对 div .main-content 相对定位 div .main-content 来正确定位 .stars div ]. （绝对定位的元素需要它们的父元素是相对定位的，否则它们将绝对定位到 body 元素）。然后将.main-content的高度设置为100vh（不是100%，因为它的父body没有指定高度）占据视口（即屏幕）的整个高度。

将.main-contentdiv相对高度定位到100vh。现在 .stars div 可以继承这个全高了。像这样：
```
.main-content {
    ...
    position: relative;  
    height: 100vh;
    ...
 } 
```
或者，先将body元素的高度设置为100vh，然后将.main-content div的高度设置为100%来继承整个高度视口。
```
body {
    height: 100vh;
} 

.main-content {
    ...
    position: relative;  
    height: 100%;
    ...
 }
```
此外，通过设置 padding 和 margin 将所有元素的属性设置为 0 并为所有元素设置 box-sizing: border-box 属性。将它放在 CSS 的顶部（这是很好的 CSS 做法）。

* { box-sizing: border-box; padding: 0; margin: 0; }

高度继承不适用于绝对位置

height inherit not working with absolute position

html

css

absolute