How to do OpenLayers map height 100% on bootstrap

Question

I want to 100% of the height.

    <div class="container-fluid">
        <div class="row">
            <div id="map" 
              style="width: 100%; height: 300px; border: 1px solid #ccc;">
            </div>
        </div>
    </div>

working code is here. The pixel size is worjking for height but persentage(%) size is not working.

Answer 1

You can try position fixed or absolute.

<div id="map" 
     style="width: 100%; height: 100%; position:fixed">
</div>