设置div以填充另一个div，其宽度是百分比

Question

我正在努力完成一些相当简单的事情，并且无法理解为什么它不起作用。我有一个div（.projectContainer），其宽度是其容器（.mainContainer）的百分比，因此它将动态调整大小。当那个子div悬停在上面时，我希望在第一个孩子里面创建一个辅助孩子（.projectTitle）。次要孩子应该填充.projectContainer的宽度和高度，并且具有半透明的背景颜色，以形成一种叠加。

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

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

Answer 1

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

Answer 2

您需要position: relative类定义中的.projectContainer。 fiddle

Answer 3

替换.projectContainer类属性，如下所示：

.projectContainer {
    width:31.2467554%;
    background-color:#000;
    position:relative;
    display:inline-block;
    margin:7px;
    overflow:hidden;    
}

更新了小提琴http://jsfiddle.net/cd85c1bc/8/

Answer 4

要完成这项工作，您需要更改一些内容：

1. 删除此块：

.projectContainer:after { content: ''; display: block; margin-top: 75%; }

1. 在min-height上添加.projectContainer。

2. 将position: relative;和min-height: inherit;添加到.projectTitle。

这应该可以解决您的问题。

这是一个带有工作示例的fiddle。