HTML覆盖高度覆盖整个可见页面 [英] HTML overlay height to cover entire visible page

问题描述

我有一个使用AJAX加载某些东西的网页。当加载正在进行时，我想显示带有加载指示器的叠加层，以便用户无法与大多数页面进行交互 - 除了顶部的菜单。我正在使用jQuery和 jQuery BlockUI插件来执行此操作。

我调用$（元素）.block（）并且它工作正常，但覆盖只扩展到我的页面的当前内容的最下方。随着更多的内容被加载并添加到页面，叠加层随之移动，这看起来有点丑陋。理想情况下，我希望从一开始就覆盖页面的整个可见区域。这样做的一个简单的呃将是为叠加层设置一个很大的高度值，如下所示：

  $（myElement）。 block（{
 overlayCSS：{
 height：'10000px'
} 
}）; 
  

...但这会创建一个滚动条！

解决方案

使用 position：fixed; 而不是 position：absolute 。这样，即使滚动，重叠式广告也不会移动。

I have a web page that loads some stuff using AJAX. I want to display an overlay with a loading indicator while the loading is in progress, so that the user cannot interact with most of the page - except the menu at the top. I'm using jQuery and the jQuery BlockUI plugin to do this.

I call $(element).block() and it works fine, but the overlay only extends as far down as the current content of my page. As more content is loaded and added to the page the overlay moves down with it and this looks a bit ugly. Ideally I'd like it to cover the entire visible area of the page right from the start. A simple hack for doing this would be to set a large height value for the overlay, like this:

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

... but this creates a scrollbar! How do I avoid this and make it just the right height to cover the visible page, but not enlarge it?

解决方案

Use position: fixed; instead of position: absolute. This way the overlay will not move even if you scroll.

这篇关于HTML覆盖高度覆盖整个可见页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！