使用CSS疊加時，頁面底部會有剩餘的空白空間嗎？

Question

我使用這個CSS應用覆蓋到我的佈局：

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

但我面對那裏在頁面底部浪費空白的問題。左側是我的菜單欄，右側是內容。覆蓋層應用後出現空白區域。如何解決這個問題呢？

樣本：http://jsfiddle.net/plainkeyman/JZqWF/1/

我申請的疊加功能到我的網頁，並且不知道如何股利的作品，但它會創建一個div突出，其中i指向的元素。

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。它將填充頁面底部的空白區域。

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

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