0

I need for the element in the snippet to be tinted darker. To do this, I have an overlay element that is black with partial transparency. I would like it to cover the red element in it's entirety. The problem is, I can't get the overlay to 100% height. Why won't this work, and how can I get it to work without specifying exact heights?

.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;
 }
<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>
Salami
  • 2,849
  • 4
  • 24
  • 33
  • I think this is duplicated, check http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window Also, have in mind the percentages refer to the parent object. THe parent object (the li) is not 100%. – Alex Angelico Dec 05 '14 at 20:13
  • @AlexAngelico the bottom: 0 trick does not work here for some reason. – Salami Dec 05 '14 at 22:12
  • Possible duplicate of [Overlay div on top of parent with same size](https://stackoverflow.com/questions/38796514/overlay-div-on-top-of-parent-with-same-size) – Dennis Heiden Sep 01 '17 at 12:57

1 Answers1

0

Set height of the .overlay to 100vh that is equal to the the viewport height:

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

Still you will get the black overlay to the whole height of the page

Tushar Gupta
  • 15,504
  • 1
  • 29
  • 47