Bootstrap在整个屏幕上拉伸内容

Question

我正在使用bootstrap进行响应式设计。

我希望内容自动填充取决于屏幕大小（哪个bootstrap允许内置）。虽然当我连接大显示器（22英寸）时它无法正常工作

见下文：

图片1（在我的笔记本电脑上）;涵盖整个屏幕

Big Monitor上的图片2（注意底部的空白区域） （在标题6和浏览器结束窗口之间）

我希望标题和内容会显示得很大以覆盖整个屏幕

HTML如下：

  <div class="container-fluid">
<div class="row" >
<table class="table">
<tr>
<td><img alt="Bootstrap Image Preview" src="Images/Logo.png"></td>
<td align="right"><img alt="Bootstrap Image Preview" src="Images/Header_RequestExpress.png"></td>
</tr>
</table>

</div>
<div class="row"  style="border:1px solid; color:Red;">
    <div class="col-md-4"  style="border:1px solid; color:green;">
        <h2>Categories</h2>
         <!--Images Carousel Here-->
    </div>
    <div class="col-md-8">
        <div class="row"  style="border:1px solid; color:blue;">
            <div class="col-md-12">
            <h2>Locations</h2>
           <!--Images Carousel Here-->
            </div>
        </div>
        <div class="row"  style="border:1px solid; color:Maroon;">
            <div class="col-md-12">
            <h2>Location Current Requests</h2>
            <h1>Header 1</h1>
                 <h2>Header 2</h2>
                  <h3>Header 3</h3>
                   <h4>Header 4</h4>
                    <h5>Header 5</h5>
                     <h6>Header 6</h6>

            </div>
        </div>
    </div>
</div>

Answer 1

将height:100vh;应用于容器div。

Answer 2

在你的例子中，在你的笔记本电脑上，只是幸运的是，你填写的内容是这样的，因为你没有把页面的任何规则设置为全高。

您必须垂直比例.table和.row。

示例：

.table {
    height: 30vh;
}

.row {
    height: 70vw;
}

或者假设table身高是100px，并且您希望在屏幕的其余部分填充其他部分，您可以申请：

.table {
    height: 200px;
}

.row {
    height: calc(100vh - 200px);
}

注意我建议您在div .row中添加另一个类，因为该类也可以在其他地方使用，就像Bootstrap提供的那样。