Adminlte: Add a div height:100% inside the #content div

[CharlesOkwuagwu]

I am Trying to use a leaflet map http://leafletjs.com/ in my content pane.

Please how can i get the map, or any div content to be 100% of the content pane?

[almasaeed2010]

Hi,

You will have to use javascript. Since the template depends on javascript to initiate the layout sizes, it won't be responsive to CSS. To have a div with a height of the window, you can use this code:

var window_height = $(window).height(),
      header_height = $(".main-header").height();
$("#myDiv").css("height", window_height - header_height);

[almasaeed2010]

@ajaykorat I don't understand your issue. Please open a new issue with full explanation of the problem. Thanks.

[CharlesOkwuagwu]

Thanks, i have resolved it.
For anyone else having this issue you may try:

setTimeout(function () { map.invalidateSize() }, 500);

<script type="text/javascript">
    $(document).ready(function () {
        var contentHeigh = $("body > #wrapper").height() - 100;
        $('#map').css("height", contentHeigh + "px");
    });
</script>

[ivantcholakov]

http://www.labnol.org/internet/embed-responsive-google-maps/28333/