빈 div 배경색을 전체 div로 채우기

Question

div 안에 div가 있고 내부 div에 배경색이나 배경 이미지가 포함되기를 원합니다. 내 코드는 다음과 같습니다

는 내가 원하는 것은 빨간색 상자입니다

모든 방법을 확장하고 일치하도록 :

<div class="row two"> 
    <div class="cols n15"> 
<h2 class="latestVideo">Latest Video</h2> 
<iframe width="100%" height="370" src="//www.youtube.com/embed/a-XQL60NVmQ" frameborder="0"  allowfullscreen></iframe> 
</div> 

    <div class="cols n9 clearfix"> 
<h2>Other Videos</h2> 
<div class="otherVids"> 
<p>"test"<p> 
<!-- <img src="images/otherVideos.jpg" alt=""> --> 
    <div class="video1">   
    </div> 
    <div class="vidoe2">   
    </div> 
    <div class="video3">   
    </div> 
</div> 
<div style="clear:both"></div> 

는 지금이 그것을 다음과 같이한다 왼쪽에있는 div의 높이. div (otherVids) 높이와 너비가 있으면이 방법이 효과가 있다는 것을 알았지 만,이 경우 웹 사이트가 더 이상 반응하지 않습니다.

그래서 어쨌든 div 배경을 여전히 공백으로 채우면서 빈 공간을 채우려면?

.otherVids{ 
    background-image: url('images/otherVideos.jpg'); 
    background-color: red; 
    width: 100%; 
    height: 100%; 
} 

Answer 1

가 iframe 동일하게 otherVids의 높이를 설정하십시오 : 여기

는 내가 가지고있는 CSS 코드입니다.

당신은 두 가지 방법을 시도 할 수 .otherVids

Answer 2

의 CSS에 height:370px; 추가, 제일 먼저입니다 :

.otherVids{ 
    min-height:370px; 
} 

나 :

.otherVids{ 
    height:370px; 
    overflow-y:scroll; 
} 

비디오 목록이 많은 경우, 당신은 반응하는 내용을 디자인 할 필요가 있습니다.

마지막으로, div는 블록 요소이므로 width:100%을 사용할 필요가 없다고 생각합니다.