使绝对定位的 div 获取父 div 的尺寸

Question

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

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

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

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

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

有什么方法可以单独使用 CSS 来解决这个问题（即不绑定到调整大小事件）？ 我需要支持 Chrome、Firefox 和 IE9+，所以我愿意接受任何现代技术。

Answer 1

只需在没有 Jquery 功能的叠加层上尝试%：

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