html - 无法让 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%;
}

这是一个 fiddle :http://jsfiddle.net/wu6svxgg/1/由于bootstrap，使用这个链接查看，因为应用了bootstrap小屏规则: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如果您需要更多信息。