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

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

Answer 1

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

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

Answer 2

所有百分比width和height都与其父元素和祖父母等相关。在您的示例中，标记中包含0个内容，并且所有div都设置为百分比高度，表示它们都没有任何高度，除非您将body和html都设置为height:100%

＆＃13;

html, body {
    height: 100%;
    margin: 0;
}
.item {
    position:relative;
    height:100%;
}
.hide {
    position:absolute;
    width:100%;
    height:100%;
    background:red;
    opacity:0.6;
}
.text {
    position:absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: yellow;
}

＆＃13;

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

＆＃13;

如何在100％的父块HTML上显示块？

2 个答案: