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

Question

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

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

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

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

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

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

Answer 1

只需在没有 Jquery 函数的覆盖层上尝试 % 即可:

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