html - bootstrap 4 行中的全高图

Question

我正在尝试让这张 map 在 Bootstrap4 列中达到全高。

我曾尝试将 h-100 添加到包含行，但我最终在 map 底部看到了滚动条，并且页面底部大约 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>

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

Fiddle here.

我想知道如何让这张 map 占据整个右栏，但又不会出现滚动条。

Answer 1

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

height: calc(100vh - 56px);

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