Can't get div to fill container-fluid - html

Question

So I am building a page using twitter bootstrap 3. I am trying to get the div to fill the container, but with no luck. This is what the div looks like:
Now the html for that bit is:
<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>
And the CSS:
.container-fluid.no-padding div{
padding: 0px;
}
div.world {
background:black;
color:white;
height:100%;
min-height:100%;
}
div img {
max-width:100%;
}
Here's a fiddle: http://jsfiddle.net/wu6svxgg/1/
Due to bootstrap, use this link to view because bootstrap small screen rules are applied: http://fiddle.jshell.net/wu6svxgg/1/show/
I have tried using min-height and height on both the container and div.world, but no luck. Any idea how I can get the black bit to fill up the rest of the container?

Answer 1

Try changing your html to this:
<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>
And then adding this css code:
.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/
Take a look at this link if you need more info.

Answer 2

You have two options:
Set html and body to 100%, plus all elements that wrap around the target element, in your example, the div world.
Example: http://www.bootply.com/uq2MmhkOvR
A problem with the above method is that the height fits the visible viewport only. If you scroll down, you will notice that the div "world" no longer reaches the bottom of the screen.
Another method is to use absolute positioning on the target element.
Example: http://www.bootply.com/Vk6A7IoVqj
In the above method, make sure to reset the position property of "world" to relative using media queries so as to benefit from Bootstrap's responsive features.
You can also simply set the background color of the page to **black*.