無法獲取div來填充容器流體

Question

所以我正在使用twitter bootstrap 3構建一個頁面。我試圖讓div來填充容器，但沒有運氣。這是div的樣子：

現在對於該位的HTML是：

<div class="container-fluid no-padding"> 
    <div class="row"> 
     <div class="col-lg-4"><img src="images/block-1.jpg" alt="Send Bulk SMS Today"/></div> 
     <div class="col-lg-4 world"> 
      <h4>SEND BULK SMS</h4> 
      <div class="world-map"></div> 
      <select> 
       <option>south africa</option> 
       <option>sri lanka</option> 
       <option>pakistan</option> 
      </select> 
      <div class="world-note">Bulk sms is an international service. Please select your country to view applicable rates.</div> 
     </div> 
     <div class="col-lg-4"><img src="images/block-3.jpg" alt="Receive Faxes on the Go"/> </div> 
    </div> 
</div> 

而CSS：

.container-fluid.no-padding div{ 
    padding: 0px; 
} 

div.world { 
    background:black; 
    color:white; 
    height:100%; 
    min-height:100%; 
} 

div img { 
    max-width:100%; 
} 

這裏有一個小提琴：http://jsfiddle.net/wu6svxgg/1/ 由於引導，使用此鏈接查看，因爲引導小屏幕規則適用：http://fiddle.jshell.net/wu6svxgg/1/show/

我曾嘗試在容器和div.world上使用最小高度和高度，但沒有運氣。任何想法如何讓黑色填充容器的其餘部分？

Answer 1

試着改變你的HTML這樣的：

<div class="container-fluid no-padding"> 
    <div class="row row-same-height"> 
     <div class="col-lg-4 col-xs-height col-top"><img src="http://www.nobelis.co.za/sandbox/temp/block-1.jpg" alt="Send Bulk SMS Today"/></div> 
     <div class="col-lg-4 col-xs-height col-top world"> 
      <h4>SEND BULK SMS</h4> 
      <div class="world-map"></div> 
      <select> 
       <option>south africa</option> 
       <option>sri lanka</option> 
       <option>pakistan</option> 
      </select> 
      <div class="world-note">Bulk sms is an international service. Please select your country to view applicable rates.</div> 
     </div> 
     <div class="col-lg-4 col-xs-height col-top"><img src="http://www.nobelis.co.za/sandbox/temp/block-3.jpg" alt="Receive Faxes on the Go"/> </div> 
     </div> 
</div> 

，然後加入這個CSS代碼：

.row-same-height > div:first-child { 
    text-align: right; 
} 
.row-same-height { 
    display: table; 
    width: 100%; 
} 
.col-xs-height { 
    display: table-cell; 
    float: none !important; 
} 
.col-top { 
    vertical-align:top; 
} 

的jsfiddle：https://jsfiddle.net/wu6svxgg/9/

看看this link，如果你需要更多的信息。

Answer 2

你有兩個選擇：

組HTML和身體100％，再加上所有元素的目標元素包裹周圍，在你的榜樣，在div 世界。

實施例：http://www.bootply.com/uq2MmhkOvR

上述方法的問題在於高度只適合的可見視口。如果向下滾動，您會注意到div「世界」不再到達屏幕的底部。

另一種方法是在目標元素上使用絕對定位。

例子：http://www.bootply.com/Vk6A7IoVqj

在上述方法中，確保「世界」的位置屬性重置爲相對使用媒體查詢，以便從引導的響應特性中受益。

您還可以簡單地將頁面的背景顏色設置爲**黑色*。