CODEWITHSUNDEEP
htmlcss
Mark Adel
Mark Adel

Reputation: 223

How to keep the height of an outer div equal to the inner div?

I have an inner div used for overlay, set to a min-height property. When the height of the overlay changes, the height of the outer div will not be affected. 

#outer {
  width: 70px;
  height: 70px;
  background-color: #000;
  position: relative;
}
#inner {
  min-height: 100%;
  min-width: 100%;
  background-color: #000;
  opacity: 0.5;
  position: absolute;
}
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>

  <div id = "outer">
    <div id = "inner">
      <br><br><br><br><br><br><br>
    </div>
  </div>

</body>
</html>

Update:

The problem seems to be with the absolute positioning. What other ways to do an overlay while keeping the outer div's height equal to it?

Upvotes: 0

Views: 2188

Answers (1)

Johannes
Johannes

Reputation: 67778

As I wrote in my comments, there's no way if you use absolute position. But if you change the code as follows, it works (still depending on the actual situation):

#outer {
  width: 70px;
  min-height: 70px;
  background-color: #000;
}
#inner {
  height: 100%;
  min-width: 100%;
  background-color: #fff;
  opacity: 0.5;
  overflow: visible;
}
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>

  <div id = "outer">
    <div id = "inner">
      <br>1<br>2<br>3<br>4<br>5<br>6<br>
    </div>
  </div>

</body>
</html>

Upvotes: 2

Related Questions