html - 如何在父 block HTML 的 100% 上显示 block ？

Question

有这样一段代码，有两个div元素:

HTML:

<div class="item">
   <div class="hide"></div>
</div>

CSS:

.item {
  position:relative;
  height:100%; // any height
}

.hide {
  position:absolute;
  height:100%;
  background:red;
  opacity:0.6;
  width:100%;
}

如何在父 block .item 的全宽和高度上显示 .hide 未在像素中设置固定的 hright

Answer 1

您可以将以下 css 规则添加到 .hide:

.hide {
  ...
  bottom: 0;
  top: 0;
  right: 0;
  left: 0;
}