使空的 div 背景颜色垂直填充整个 div答案

【问题标题】：Make empty div background colour fill entire div vertically使空的 div 背景颜色垂直填充整个 div
【发布时间】：2014-02-19 00:45:58
【问题描述】：

我在 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%;
 }

【问题讨论】：

标签： html css responsive-design

【解决方案1】：

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

在.otherVids的css中添加height:370px;

【讨论】：

这行得通，我应该这样做，因为 iframe 高度永远不会只改变宽度。

【解决方案2】：

你可以尝试两种方法，第一件事是：

.otherVids{
  min-height:370px;
}

或：

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

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

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

【讨论】：