Question

我有一个包含多个小部件的页面，每个小部件都显示来自不同服务的数据。

我想在加载特定小部件的数据时，独立地在每个小部件上设置加载覆盖。小部件没有设置的高度或宽度。我正在使用Bootstrap的网格来构建布局。

基本上，一旦我需要加载数据，我会将另一个具有不透明度的div添加到窗口小部件根div，并将其绝对定位为top / left 0。

当前使用窗口小部件根div上的jQuery innerWidth方法计算叠加层的宽度和高度。这使得叠加层与实际窗口小部件的大小相同。

我的问题是，当我在显示叠加层时调整页面大小时，它的宽度和高度不会重新计算，而窗口小部件的尺寸则是。我最终得到的覆盖div大于其父级。

有没有办法可以单独使用CSS解决这个问题（即没有绑定到resize事件）？我需要支持Chrome，Firefox和IE9 +，所以我对任何现代技术都很开放。

Answer 1

只需在没有Jquery功能的覆盖图上尝试%：

.overlay {
   width:100%;
   height:100%;
}