Question

所以我正在使用twitter bootstrap构建页面3.我试图让div填充容器，但没有运气。这就是div的样子：

enter image description here

现在该位的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上使用min-height和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和正文设置为 100％，以及包围目标元素的所有元素，在您的示例中，div world 。

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

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

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

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

在上面的方法中，确保重置＆＃34; world＆＃34;的位置属性。 relative 使用媒体查询，以便从Bootstrap的响应功能中受益。

您也可以简单地将页面的背景颜色设置为** black *。

无法获得div来填充容器流体

2 个答案: