OpenLayers map CSS - высота кадрирования

Question

Я должен работать над кодом, который кто-то разработал, и переделать весь интерфейс. Вот оригинальный HTML

<div class="ui-panelgrid-cell ui-g-12 ui-md-6 ui-l-6 ui-lg-8">
    <div id="geoForm:j_idt55" 
        class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-shadow ui-hidden-container ui-resizable" 
        role="dialog" 
        aria-labelledby="geoForm:j_idt55_title" 
        aria-hidden="true" 
        style="width: auto; 
        height: auto;"
    >
        ...
    </div>

    <div id="map" class="map">
        <div class="ol-viewport" data-view="32" style="position: relative; overflow: hidden; width: 100%; height: 100%; touch-action: none;">
            <canvas class="ol-unselectable" width="1198" height="828" style="width: 100%; height: 100%; display: block;"></canvas>
            <div class="ol-overlaycontainer"></div>
            <div class="ol-overlaycontainer-stopevent">
                <div class="ol-zoom ol-unselectable ol-control">
                    <button class="ol-zoom-in" type="button" title="Zoom in">+</button>
                    <button class="ol-zoom-out" type="button" title="Zoom out">−</button>
                </div>
            </div>
            <div class="ol-scale-line ol-unselectable">
                <div class="ol-scale-line-inner" style="width: 72px;">2 km</div>
            </div>
            <div class="ol-zoomslider ol-unselectable ol-control">
                <button type="button" class="ol-zoomslider-thumb ol-unselectable" style="top: 188px;"></button>
            </div>
            <div id="geoForm:layerswitcher" class="ui-panel ui-widget ui-widget-content ui-corner-all" data-widget="layerSwitcher">
                <div id="geoForm:layerswitcher_content" class="ui-panel-content ui-widget-content">
                    <img src="../../images/plan_on.png" onclick="setVisibilityPlan()" title="Plan" class="layerswitcher-icone layer-plan">
                    <img src="../../images/sat.png" onclick="setVisibilitySatellite()" title="Photo" class="layerswitcher-icone layer-sat">
                </div>
            </div>
        </div>
    </div>
</div>

Моя проблема заключается в следующем. Я хочу использовать bootstrap в качестве CSS-фреймворка, а также я хочу использовать vh для управления высотой. Карта имеет определенную ширину и должна занимать 2/3 ширины. Моя проблема связана с высотой: я хочу отобразить ширину 100% и хочу, чтобы высота соответствовала высоте родительского элемента div и была обрезана снизу (только потому, что я должен отображать масштаб карты в нем).

На самом деле HTML должен быть таким: высота контейнера, например, 76vh.

<div class="row" style="padding-top: 15px;">
    <div class="col-xs-12 col-md-6 col-lg-3 col-xl-3" style="background-color: #FFF;">column 1</div>
    <div class="col-xs-12 col-md-6 col-lg-9 col-xl-9" style="background-color: #FFF;">
        <div id="map">
            HERE GOES THE MAP ...
        </div>
    </div>
</div>