Question

我有一个用于叠加的内部div，设置为min-height属性。当叠加层的高度发生变化时，外部div的高度不会受到影响。

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

更新

问题似乎与绝对定位有关。在保持外部div的高度等于它的同时，还有哪些其他方法可以进行叠加？

Answer 1

正如我在评论中写的那样，如果你使用绝对位置，那就没有办法了。但是，如果您按如下方式更改代码，它可以工作（仍然取决于实际情况）：

＆＃13;

#outer {
  width: 70px;
  min-height: 70px;
  background-color: #000;
}
#inner {
  height: 100%;
  min-width: 100%;
  background-color: #fff;
  opacity: 0.5;
  overflow: visible;
}

＆＃13;

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

＆＃13;

如何保持外部div的高度等于内部div？

1 个答案: