jquery - 设置一个 div 来填充另一个宽度为百分比的 div

Question

我正在尝试完成一些相当简单的事情，但不明白为什么它不起作用。我有一个 div (.projectContainer)，其宽度是其容器 (.mainContainer) 的百分比，因此它会动态调整大小。当那个子 div 悬停在上面时，我想要在第一个子元素内创建一个次要子元素 (.projectTitle)。次要子项应填充 .projectContainer 的宽度和高度，并具有半透明的背景颜色以进行某种叠加。

我在 this fiddle 中复制了必要的组件.如您所见，.projectTitle 将其 100% 的宽度和高度解释为 100% 的视口(viewport)，而不是父元素。 .projectContainer 也没有隐藏 .projectTitle 的溢出，就像它应该做的那样。

注意:.projectContainer:after 样式是为了保持.projectContainer 的宽高比，虽然这可能过于复杂了，不确定是否有更简单的方法来处理这个问题。

Answer 1

只需将 .projectContainer 的位置更改为 relative 即可。当一个 child 设置为绝对定位时，它从第一个非静态定位的父亲那里获取值，在本例中为 .mainContainer，因此 .projectContainer 获取它的高度和宽度。