height inherit not working with absolute position-CodePudding

I have an absolute element that is the background. I can't set it as the div's background because it is animated and it requires 2 css classes. I simplified it to let you understand the problem.

I would like to set the height of this absolute element same of its parent, which, containing all the other elements, reaches the bottom of the page. So this absolute element that I use as background should cover all the background page, but inherit is not working.

I tried also height:100% but it didn't work. It works only if I set manually the height, but doing like this is not responsive.

.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 >
      <div ></div>
      <div >
         <div ></div>
         <div ></div>
         <div ></div>
      </div>
   </div>
</body>

I want to specify that if I set the .main-content class with a specific height it works. But as I said before, in this way it is not responsive.

CodePudding user response：

To fix this, you need to correctly position the .stars div absolutely by positioning its parent div .main-content relatively. (Absolutely positioned elements need their parents to be relatively positioned otherwise they will be positioned absolutely to the body element). Then set the height of .main-content to 100vh (not 100%, because its parent body has no specified height) to take up the full height of the viewport (i.e screen).

Position the .main-content div relatively and height to 100vh. Now the .stars div can inherit this full height. Like so:
```
.main-content {
    ...
    position: relative;  
    height: 100vh;
    ...
 } 
```
Alternatively, set the height of the body element to 100vh first, then set the height of the .main-content div to 100% to inherit the full height of the viewport.
```
body {
    height: 100vh;
} 

.main-content {
    ...
    position: relative;  
    height: 100%;
    ...
 }
```
Additionally, remove browser default paddings and margins and prevent overshooting widths and heights of elements on your page by setting the padding and margin properties of all elements to 0 and setting box-sizing: border-box property for all of them. Place this at the top of your CSS (This is good CSS practice).
```
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
} 
```

CodePudding user response：

Please try this in your css: ‌‌‌
-Removeheight : 100%from .main-contentand addheight:100vh ‌‌‌‌‌

-add a position:relative to .main-content

Tell me what is going on.