CSS make child width fill parent width - абсолютная позиция

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/ и followng изображений иллюстрирует проблему.

Answer 1

1. Я установил каждый элемент box-sizing: border;. Это значит, что мы можем делать такие вещи, как «сделаем этот элемент 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>