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

标签 jquery css

我正在尝试完成一些相当简单的事情,但不明白为什么它不起作用。我有一个 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/

相关文章:

javascript - 通过 php 中的 onchange 过滤数据列表

javascript - 如何根据另一个非 Angular JS 文件中的全局变量更新我的 Angular $scope 变量

jquery - 使用 css/jquery 自定义垂直滚动条

javascript - (JQuery) 在文本框中使用单词或短语触发 Action

jquery - 带有图像的随机推荐

javascript - HTML:在表的 td 上覆盖 div

javascript - 如何为数据表中的按钮分配 ID?

html - 页脚背景应该是 Angular ,但中间有一个不常见的形状

javascript - 导航栏被分成多个 div 类 - 如何将它们全部粘贴到滚动条的顶部? (JavaScript)

javascript - Div 在我想要隐藏后显示 1 秒