CSS使子宽度填充父宽度 - 绝对位置

Question

我试图让我的子 div info 填充父 div video-featured 宽度，但我还需要子 div 是绝对的，以便它可以重叠父分区。

我已经设法通过在子 div 中使用固定宽度来实现这一点，但是我不想使用固定宽度..有什么方法可以实现我想要的吗？

<div class="video-featured col-md-4">
  <div class="video">
    <video name="media">
      <source src="https://fat.gfycat.com/QuerulousGrayGardensnake.webm" type="video/webm" />
    </video>
  </div>
  <div class="info">
    <h3 class="title">
      <a title="some random title">
        Some random text
      </a>
    </h3>
  </div>
</div>

检查 fiddle https://jsfiddle.net/3w73t9yn/ ，下面的图片说明了这个问题。

Answer 1

1. 我将每个元素设置为 box-sizing: border-box;。这样我们就可以做一些事情，比如“让这个元素 100% 宽，但也应用填充”。
2. 移除您在 video 上设置的固定高度，让 100% 的值填满整个容器。
3. 我使 .info 成为 .video 的子级。
4. 我将相对定位设置为 .video，以便新的 .info 子级具有用于绝对定位的适当上下文。

* {
  box-sizing: border-box;
}

.video-featured
{
    outline: 0;
    position: relative;
}

video
{
    width: 100%;
}

.video {
  position: relative;
}

.info
{
    position: absolute;
    bottom: 0px;
    left: 0;
    height: 60px;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
    opacity: 0.6;
    background-color: #484848;
}

<div class="video-featured col-md-4">
  <div class="video">
    <video name="media">
      <source src="https://fat.gfycat.com/QuerulousGrayGardensnake.webm" type="video/webm" />
    </video>
    
    <div class="info">
      <h3 class="title">
        <a title="some random title">
          Some random text
        </a>
      </h3>
    </div>    
  </div>
  
</div>