'height inherit not working with absolute position

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 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>

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.

htmlcssabsolute


Solution 1:[1]

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).

  1. 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%;
    ...
 }

  2. 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;
}

Solution 2:[2]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Chizaram Igolo
Solution 2

Related Questions