我正在尝试完成一些相当简单的事情,但不明白为什么它不起作用。我有一个 div (.projectContainer
),其宽度是其容器 (.mainContainer
) 的百分比,因此它会动态调整大小。当那个子 div 悬停在上面时,我想要在第一个子元素内创建一个次要子元素 (.projectTitle
)。次要子项应填充 .projectContainer
的宽度和高度,并具有半透明的背景颜色以进行某种叠加。
我在 this fiddle 中复制了必要的组件.如您所见,.projectTitle
将其 100% 的宽度和高度解释为 100% 的视口(viewport),而不是父元素。 .projectContainer
也没有隐藏 .projectTitle
的溢出,就像它应该做的那样。
注意:.projectContainer:after
样式是为了保持.projectContainer
的宽高比,虽然这可能过于复杂了,不确定是否有更简单的方法来处理这个问题。
最佳答案
只需将 .projectContainer 的位置更改为 relative 即可。 当一个 child 设置为绝对定位时,它从第一个非静态定位的父亲那里获取值,在本例中为 .mainContainer,因此 .projectContainer 获取它的高度和宽度。
关于jquery - 设置一个 div 来填充另一个宽度为百分比的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28595052/