如何使用CSS根據頁面高度在頁面上設置疊加層

Question

在我的網站中，我想在JavaScript禁用時在頁面上方設置疊加層。由於每個頁面的高度不同，因此無法設置疊加層目前我正在做的是我設置一個固定的最大高度爲2000px，如下所示：

.overLay { background-color：＃666666; height：2000px; left：0; position：absolute; top：0; 寬度：100％; z-index：1003; 不透明度：0.5; }

但是，這不是我want.Because一些網頁有非常少的高度大於所提到的疊加高度和一些網頁有更多，所以疊加是不以多少有效這個case.I希望根據頁面高度設置重疊高度。可以告訴我如何使用JavaScript實現此功能嗎？

Answer 1

body,html { height:100%; width:100%; padding:0; margin:0; } 
.overlay { position:absolute; top:0px; left:0px; z-index:999; height:100%; width:100%; background:#c1c1c1; } 

這應該有效。覆蓋圖應該是<div>。

Answer 2

這很可能產生其他副作用取決於你的內容或任何...但你也許可以用

body { 
    overflow:hidden; 
} 

但是，這當然意味着頁面不會滾動，如果內容是長於頁面...但它確實阻止了一些頁面由於覆蓋而變得更長