Question

我需要将代码段中的元素设置得更暗。为此，我有一个黑色的叠加元素，具有部分透明度。我希望它涵盖整个中的红色元素。问题是，我无法将叠加层设置为100％高度。为什么要赢得这项工作，如何在不指定确切高度的情况下让它工作？

＆＃13;

.overlay-shell {
  position: relative;
  top: 0;
  left: 0;
}

.overlay {
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  height: 60px; /* how do I get this to take 100% of the height? */
  width: 100%;
  position: absolute;
}

ul.alarms {
  list-style: none;
  margin: 0 30px;
}

ul.alarms li.alarm {
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c53635), color-stop(50%, #9d2b2a), color-stop(51%, #952928), color-stop(100%, #9d2b2a));
  background-image: -moz-linear-gradient(#c53635 0%, #9d2b2a 50%, #952928 51%, #9d2b2a 100%);
  background-image: -webkit-linear-gradient(#c53635 0%, #9d2b2a 50%, #952928 51%, #9d2b2a 100%);
  background-image: linear-gradient(#c53635 0%, #9d2b2a 50%, #952928 51%, #9d2b2a 100%);
}

ul.alarms .content {
  
}

ul.alarms li .right-sidebar {
  float: right;
  max-width: 180px;
}

ul.alarms .bottom-bar {
  clear: both;
}

.response-btn {
  display: inline-block;
  width: 20%;
  text-align: center;
  margin: 0px;
  padding: 0px;
 }

＆＃13;

<html>
<ul class="alarms">
  <li class="alarm" id="alert_87590">
    <div class="overlay-shell">
      <div class="overlay"></div>
    </div>
    <div class="content">
      <div class="primary">
        <a href="/senior/1828"><h1 class="provisioned-service-name">Hannah Montana</h1>
          </a>
      </div>
    </div>
    <div class="right-sidebar">
      <p>
        <a class="address" href="/senior/1828">Unit 128</a>
      </p>
    </div>
    <div class="bottom-bar">
        <div class="response-btn">
          <span>Yes</span>
        </div><div class="response-btn">
          <span>OK</span>
        </div><div class="response-btn">
          <span>Thank you</span>
        </div><div class="response-btn">
          <span>Custom</span>
        </div><div class="response-btn">
          <span>Roger</span>
      </div>
    </div>
  </li>
</ul>

</html>

＆＃13;

Answer 1

将.overlay的高度设置为100vh，等于视口高度：

overlay {
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  position: absolute;
}

你仍然可以在页面的整个高度上看到黑色叠加层

占用100％父元素高度的CSS叠加层

1 个答案: