OpenLayers地图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>

我的问题如下。我想将引导程序用作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>