使空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背景填满空白区域，同时仍然保持响应？

这是我的CSS代码：

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

Answer 1

尝试将otherVids的高度设置为等于iframe。

将height:370px;添加到.otherVids

的CSS中

Answer 2

你可以尝试两种方法，首先是：

.otherVids{
  min-height:370px;
}

或：

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

如果您的视频列表很多，则需要将内容设计为响应式。

最后，我认为您不需要使用width:100%，因为div是块元素。