Карта листовки не заполняет всю упаковку div - PullRequest
Новая
       35

Карта листовки не заполняет всю упаковку div

0 голосов
/ 03 октября 2019

Немного новичок, когда дело доходит до HTML / начальной загрузки и т. Д. У меня возникла проблема, когда div (карта Leaflet) не полностью заполняет div-оболочку. По сути, у меня есть боковая панель, которую можно включать и выключать, и сама карта.

Вот моя основная структура 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;

}

Моя проблема в том, что карта не полностью заполняет div оболочки. Я попытался установить div содержимого (который содержит div карты) в 100vh, предполагая, что это заполнит всю оболочку, но не повезло. Снимки экрана здесь:

enter image description hereenter image description here

Вы можете видеть, что карта заполняет весь контент div, носодержимое div не заполняет весь внешний div-обертку, что вызывает этот пробел / пробел. Как я могу получить содержимое, чтобы полностью заполнить оболочку, сохраняя при этом существующий внешний вид боковых панелей? Заранее спасибо.

1 Ответ

1 голос
/ 03 октября 2019

это из-за магии flexbox. Вы можете указать браузеру заполнить оставшееся пространство элементом #content следующим образом: 

#content {
    flex-grow: 1;
}
...