讓空div背景顏色垂直填充整個div

我有一個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%; 
}

來源

2014-02-19 P22

嘗試設置的otherVids的高度等於iframe。

添加height:370px;到.otherVids

來源

2014-02-19 00:52:17 steinmas

這有效，我應該這樣做，因爲iframe的高度永遠不會改變寬度。 – P22

的CSS，你可以試試二方法，第一件事情就是：

.otherVids{ 
    min-height:370px; 
}

或：

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

如果您的視頻列表是很多，你需要設計響應的內容。

最後，我想你不需要使用width:100%，因爲div是塊元素。

來源

2014-02-19 02:24:07 threewood

讓空div背景顏色垂直填充整個div

回答

相關問題