覆盖整个可见页面的 HTML 覆盖高度答案

【问题标题】：HTML overlay height to cover entire visible page覆盖整个可见页面的 HTML 覆盖高度
【发布时间】：2011-02-01 21:10:57
【问题描述】：

我有一个使用 AJAX 加载一些内容的网页。我想在加载过程中显示带有加载指示器的叠加层，以便用户无法与页面的大部分交互 - 除了顶部的菜单。我正在使用 jQuery 和 jQuery BlockUI plugin 来执行此操作。

我调用 $(element).block() 并且它工作正常，但覆盖仅延伸到我页面的当前内容。随着更多内容被加载并添加到页面中，覆盖层随之向下移动，这看起来有点难看。理想情况下，我希望它从一开始就覆盖页面的整个可见区域。这样做的一个简单技巧是为叠加层设置一个较大的高度值，如下所示：

$(myElement).block({
        overlayCSS: {
            height: '10000px'
        }
 });

...但这会创建一个滚动条！如何避免这种情况并使其恰好覆盖可见页面的高度，但不放大它？

【问题讨论】：

标签： html css dom jquery-ui

【解决方案1】：

使用position: fixed; 代替position: absolute。这样，即使您滚动，叠加层也不会移动。

【讨论】：

老兄感谢您的回答。这个问题快把我逼疯了！
position fixed 是解决方案，如果页面使用通过另一个模板动态加载/添加的页眉和页脚，请确保将覆盖 div 放置在正确的位置，以便它也覆盖页眉和页脚...

【解决方案2】：

在 XHTML 中，html 和 body 元素并不像在 HTML 中那么神奇。 body 元素不会自动填充视口（窗口），它的大小仅与内容一样高。

要让一个元素填满窗口，你首先必须让 html 和 body 元素填满窗口：

html, body { height: 100%; }

然后你可以在 body 的一个元素上使用height: 100%; 让它覆盖整个高度。

【讨论】：

这个解释很有道理，听起来很有希望，但在我的页面上不太适用。我认为这是因为它还使用动态加载的 jQuery UI 选项卡，我怀疑从开始的每个元素都必须设置“高度：100%”。

【解决方案3】：

将 position 设置为 absolute 并将高度设置为 100%。

【讨论】：

【解决方案4】：

我已经为你做了一个完整的例子，现在你可以在你的应用程序中使用它，并在 ajax 请求完成后隐藏它。

点击here！

<div class="overlay"></div>
<div id="container">
    content Whatever you want even you can delete this container
<div>

【讨论】：

【解决方案5】：

为我工作！我将absolute 更改为fixed。

function showWaitPopup() {
  var obj = document.getElementById('bkdiv');
  if (obj) {
    obj.style.display = 'block';
  }
  return true;
}

showWaitPopup();

div.bkdiv {
  background-color: #000000;
  opacity: 0.6;
  filter: alpha(opacity=60);
  z-index: 2000;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 200%;
  display: none;
}

&lt;div class="bkdiv" id="bkdiv"&gt;&lt;/div&gt;

【讨论】：

【解决方案6】：

以下代码最终为我工作：

$("body").block({
  message: '<h2>Loading...</h2>',
  overlayCSS: {
    position: 'absolute',
    top: '0',
    bottom: '0',
    left: '0',
    right: '0'
  }
});

body {
  color: #004A6E;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

我使用以下帖子作为参考：Make div 100% height of browser window 我必须做的一项修改是添加左右。我的叠加层只覆盖了屏幕的一半。

【讨论】：