如何使 div 成為頁面（不是屏幕）高度的 100%？

Question

我正在嘗試使用 CSS 在我的頁面上創建一個“灰色”效果，同時在應用程序運行時在前台顯示一個加載框。 我通過創建一個 100% 高度/寬度、半透明的黑色 div 來完成此操作，它的可見性通過 javascript 打開/關閉。我認為這很簡單； 但是，當頁面內容擴展到屏幕滾動點時，滾動到頁面底部會顯示未變灰的部分。 換句話說，div 高度中的 100% 似乎適用於瀏覽器視口大小，而不是實際頁面大小。 如何使 div 展開以覆蓋整個頁面的內容？ 在打開它的可見性之前，我嘗試使用 JQuery.css('height', '100%') 但這不會改變任何東西。

這是有問題的 div 的 CSS：

div.screenMask
{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: #000000;
    opacity: 0.7;
    filter: alpha(opacity=70);
    visibility: hidden;
}

謝謝。

Answer 1

如果將position: absolute更改為position: fixed它將在除 IE6 之外的所有瀏覽器中工作。 這將 div 固定到視口，因此它不會在滾動時移出視圖。

您可以在 jQuery 中使用$(document).height()使其在 IE6 中也能正常工作。 例如

$('.screenMask').height($(document).height());

這顯然也會為所有其他瀏覽器修復它，但如果可以避免的話，我寧願不使用 JavaScript。 實際上，您也需要對寬度做同樣的事情，以防出現任何水平滾動。

也有很多 hack 可以在 IE6 中進行固定定位，但它們傾向於對您的 CSS 施加一些其他限制，或者使用 JavaScript，因此它們可能不值得麻煩。

另外，我假設您只有這些面具中的一個，所以我建議為它使用 ID 而不是 class。

Answer 2

我意識到我在被問到這個問題很久很久之后才回答這個問題，但是我在被這個問題短暫地絆倒后來到這里，目前的答案都不正確。

這是正確的答案：

body {
    position: relative;
}

而已！ 現在您的元素將相對於<body>而不是視口定位。

我不會理會position: fixed ，因為它的瀏覽器支持仍然參差不齊。 iOS 5 之前的 Safari 根本不支持。

請注意，您的<div>元素將覆蓋<body>的邊框（框 + 填充 + 邊框），但不會覆蓋其邊距。 通過在您的<div>上設置負位置（例如top: -20px ）或通過刪除<body>的邊距來補償。

我還建議將<body>設置為height: 100%以確保您不會在較短的頁面上看到部分遮罩的視口。

先前答案中的兩個有效要點。 正如 Ben Blank 所說，您可以丟失width和height聲明，而是定位所有四個角。 墨卡托是對的，您應該為如此重要的單個元素使用 ID 而不是 class。

這留下了以下推薦的完整 CSS：

body {
    position: relative;
    margin: 0;
}

#screenMask {
    position: absolute;
    left: 0; right: 0;
    top: 0; bottom: 0;
    z-index: 1000;
    background-color: #000;
    opacity: 0.7;
    filter: alpha(opacity=70);
    visibility: hidden;
}

和 HTML：

<body>
    <div id="screenMask"></div>
</body>

我希望這可以幫助別人！

Answer 3

div.screenMask
{
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 1000;
    background-color: #000000;
    opacity: 0.7;
    filter: alpha(opacity=70);
    visibility: hidden;
}

通過設置top 、 bottom 、 left和right ，自動計算高度和寬度。 如果screenMask是<body>元素的直接子元素並且標准框 model 有效（即未觸發怪癖模式），這將覆蓋整個頁面。

Answer 4

如果您使用 jQuery 來設置彈出窗口之前的高度，我猜可以再添加一些 javascript :)

您可以將 div 的高度設置為 document.body 的 scrollHeight - 這樣它應該覆蓋整個主體。 你確實需要添加一些額外的技巧來確保它一直覆蓋身體，以防下面的東西決定生長。

Answer 5

如果你想要帶有疊加效果的彈出窗口，那么你可以使用這些步驟..

<style>
.overlay{
 background:#000;
 opacity:0.5;
 position:fixed;
 z-index:1;
 width:100%;
 height:100%;
}
.popup{
 width:500px;
 margin:auto;
 position:fixed;
 z-index:2;
 height:300px;
}
</style>
<div class="overlay"></div>
<div class="popup">
      Hello everyone
</div>

如何使 div 成為頁面（不是屏幕）高度的 100%？

問題描述

5 個解決方案

解決方案1
60 已采納 2009-06-16 20:02:59

解決方案2
19 2012-08-16 03:32:34

解決方案3
4 2009-06-16 20:26:26

解決方案4
2 2009-06-16 20:05:47

解決方案5
2 2014-09-18 12:43:27

如何使 div 成為頁面（不是屏幕）高度的 100%？

問題描述

5 個解決方案

解決方案1 60 已采納 2009-06-16 20:02:59

解決方案2 19 2012-08-16 03:32:34

解決方案3 4 2009-06-16 20:26:26

解決方案4 2 2009-06-16 20:05:47

解決方案5 2 2014-09-18 12:43:27

解決方案1
60 已采納 2009-06-16 20:02:59

解決方案2
19 2012-08-16 03:32:34

解決方案3
4 2009-06-16 20:26:26

解決方案4
2 2009-06-16 20:05:47

解決方案5
2 2014-09-18 12:43:27