无法 div 填充 container-fluid

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

这是 fiddle：http://jsfiddle.net/wu6svxgg/1/ 由于bootstrap，使用此link查看，因为应用了bootstrap小屏幕规则：http://fiddle.jshell.net/wu6svxgg/1/show/

我尝试在容器和 div.world 上使用 min-height 和高度，但没有成功。知道如何让黑色位填满容器的其余部分吗？

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 和 body 设置为 100%，加上环绕目标元素的所有元素，在您的示例中，div 世界.

示例：http://www.bootply.com/uq2MmhkOvR

上述方法的一个问题是高度仅适合可见视口。如果向下滚动，您会注意到 div "world" 不再到达屏幕底部。

另一种方法是在目标元素上使用绝对定位。

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

在上述方法中，请确保使用媒体查询将 "world" 的位置属性重置为 relative 以便受益于 Bootstrap的响应功能。

您也可以直接将页面的背景颜色设置为**黑色*。

无法 div 填充 container-fluid

Can't get div to fill container-fluid

html

css

twitter-bootstrap-3