html - 传单 map 未填满整个包装器 div

Question

在 HTML/bootstraps 等方面，我有点新手。我遇到一个问题，即 div(传单 map )没有完全填充包装器 div。基本上，我有一个可以打开和关闭的侧边栏，以及 map 本身。

这是我的基本 HTML 结构:

<div class="wrapper">

    <!-- Sidebar -->
    <nav id="sidebar">
        <div class="sidebar-header">
            <h3>Genre</h3>
            <input type="radio" name = 'genre' id="allGenre" checked> All<br>
        </div>

    </nav>
    <!-- Page Content -->
    <div id="content">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
                <button type="button" id="sidebarCollapse" class="btn btn-info">
                    <i class="fas fa-align-left"></i>
                    <span>Filter Events</span>
                </button>
            </div>
        </nav>
            <!-- Map! -->
            <div id="map" style="min-width: 100vh; min-height: 100vh" pointer-events="all"></div>
    </div>
</div>

以及相关 CSS 的片段:

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

#map{
}

#content{   
}

#sidebar {
    /* don't forget to add all the previously mentioned styles here too */
    background: #7386D5;
    color: #fff;
    transition: all 0.3s;
    min-width: 250px;
    max-width: 250px;
    min-height: 100vh;

}
  
#sidebar.active {
    margin-left: -250px;

} 

我的问题是 map 没有完全填充包装器 div。我已经尝试将内容 div(包含 map div)设置为 100vh，假设这会填满整个包装器，但没有运气。屏幕截图在这里:

您可以看到 map 填满了整个内容 div，但内容 div 没有填满整个外部包装 div，这导致了间隙/空白。如何让内容完全填充包装器，同时保持侧边栏的现有外观？

Answer 1

这是因为 flexbox 的魔力。您可以通过 #content 元素告诉浏览器填充剩余空间，如下所示:

#content {
    flex-grow: 1;
}