Сделать пустой цвет фона div заполнить весь div вертикально

У меня есть 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 заполнил пустое пространство, оставаясь отзывчивым?

Вот код CSS, который у меня есть:

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