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

Question

我试图让我的孩子div info填充父div video-featured宽度，但我还需要将子div设为绝对，以便它可以与父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>

检查小提琴 https://jsfiddle.net/3w73t9yn/ ，后续图片说明问题。

Answer 1

1. 我将每个元素设置为box-sizing: border;。这样我们就可以做到这样的事情：＆＃34;使这个元素100％宽，但也应用填充＆＃34;。
2. 删除您在video上设置的固定高度，可让100％值填满整个容器。
3. 我让.info成为.video的孩子。
4. 我将相对定位设置为.video，以便新.info子项具有适当的绝对定位上下文。
＆＃13;
＆＃13;
* {
  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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;