引导程序 4 行中的全高图答案

【问题标题】：full height map in bootstrap 4 row引导程序 4 行中的全高图
【发布时间】：2019-11-29 04:36:20
【问题描述】：

我正试图让这张地图在 Bootstrap4 列中全高。

我尝试将 h-100 添加到包含行，但最终在地图底部出现滚动条，并且页面底部的 10% 左右丢失。

布局的相关代码是：

   <div class="row h-100">
    <div id="leftPanel" class="col-sm-2">
        <table id="tasklist" class="table table-sm">
            <thead>
                <tr>
                    <th>Time</th>
                    <th>District</th>
                    <th>Activity</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>12/12/19 08:00</td>
                    <td>ACD</td>
                    <td><a href="#">3F schools</a></td>
                    </a>
                </tr>
                <tr>
                    <td>13/12/19 19:30</td>
                    <td>WMD</td>
                    <td><a href="#">3T Burbank St</a></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="viewDiv" class="col-sm-10">
    </div>
 </div>

在小提琴中它再次发生变化，因此该行仅与左侧 col div 中的行数一样高。

Fiddle here.

我想知道如何让这张地图占据整个右列，但不会以滚动条结束。

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

尝试像这样添加高度属性值：

height: calc(100vh - 56px);

56px 是您的顶栏高度，需要从地图高度中减去它。

【讨论】：

很好看的先生 :)
@t3x4r 抱歉，将其作为样式添加到行中，或者？
@t3x4r on chome 这会导致窗口“闪烁”
@AlGrant 是的，我看到了，但只是希望这是由于小提琴，而不是浏览器。

【解决方案2】：

我添加了container-fluid 以获得全宽。
为左侧面板添加类col-md-3，为地图视图添加col-md-9

设置height=700px 的#viewDiv。我试过height:100%，但没用，它只得到像素。

 <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
   <a class="navbar-brand" href="#">Map</a>
 </nav>

 <div class="container-fluid">

  <div class="row">
    <div id="leftPanel" class="col-md-3">
        <table id="tasklist" class="table table-sm">
            <thead>
                <tr>
                    <th>Time</th>
                    <th>Area</th>
                    <th>Activity</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>12/12/19 08:00</td>
                    <td>CD</td>
                    <td><a href="#">schools</a></td>
                    </a>
                </tr>
                <tr>
                    <td>13/12/19 19:30</td>
                    <td>MD</td>
                    <td><a href="#">Burbank St</a></td>
                </tr>
                <tr>
                    <td>13/12/19 21:00</td>
                    <td>CM</td>
                    <td><a href="#">Westfield</a></td>
                </tr>
                <tr>
                    <td>15/12/19 15:30</td>
                    <td>CM</td>
                    <td><a href="#">Langiola</a></td>
                </tr>
            </tbody>
        </table>
    </div>

  <style>
   #viewDiv{ height:700px; }
  </style>
  <div id="viewDiv" class="col-md-9"></div>

  </div><!--end row-->

</div><!--end container-->

【讨论】：