使用css overlay时，页面底部是否有剩余的空白区域？

Question

我正在使用此CSS将叠加层应用于我的布局：

div.hopscotch-overlay {
  position: absolute;
  opacity: .3;
  background-color: #000;
}

但我面临的问题是页面底部有浪费空白区域。左侧是我的菜单栏，右侧是内容。应用叠加后会出现空白区域。如何解决这个问题？

示例：http://jsfiddle.net/plainkeyman/JZqWF/1/

我正在将叠加功能应用到我的页面中，并且不确定div是如何工作的，但它会创建一个div来突出显示我指向的元素。

Answer 1

我想你想要

div.hopscotch-overlay {
        position: absolute;
        opacity: .3;
        background-color: #000;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
}

或者那种效果。您需要指定div的位置。

Answer 2

授予left:0;和right:0以覆盖空白区域。

Answer 3

您可能需要设置left: 0，top: 0和bottom: 0。它将填充页面底部的空白区域。

＆＃13;

＆＃13;

div.hopscotch-overlay
{
  width: 150px;
  position: absolute;
  opacity: .3;
  background-color: #000;
  left: 0;
  top: 0;
  bottom: 0;
}

＆＃13;

<div id="body">
  <div class="hopscotch-overlay"></div>
</div>

＆＃13;

＆＃13;

＆＃13;