How to do OpenLayers map height 100% on bootstrap

twitter-bootstrap map openlayers
barteloma picture barteloma · Aug 13, 2014 · Viewed 10.1k times · Source

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

bayramucuncu picture bayramucuncu · Aug 13, 2014

You can try position fixed or absolute.

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

Related questions

Center a column using Twitter Bootstrap 3

How do I center a div of one column size within the container (12 columns) in Twitter Bootstrap 3? I want a div, with a class .centered to be centered within the container. I may use a row if there are multiple …

Read More
How to open a Bootstrap modal window using jQuery?

I'm using Twitter Bootstrap modal window functionality. When someone clicks submit on my form, I want to show the modal window upon clicking the "submit button" in the form. <form id="myform" class="form-wizard"> <h2 class="form-wizard-heading"&…

Read More
vertical-align with Bootstrap 3

I'm using Twitter Bootstrap 3, and I have problems when I want to align vertically two div, for example — JSFiddle link: The grid system in Bootstrap uses float: left, not display:inline-block, so the property vertical-align doesn't work. I tried using …

Read More