Question

For my purposes, I need to set the div height as quickly as possible.

Using the document.ready() event is not fast enough, so I want to set the inline CSS style of the div.

How can achieve something like this?

<div id="map-container" style="height:javascript(getwindowheight)px;">
    <div id="map">

    </div>
</div>

function getwindowsheight() {
    return window.height;
}

Any suggestions?

Answer 1

Since you want it to be dynamic, you will need to pay attention to the following events:

• window resize
• window ready

Set your HTML first:

<div id="map-container"></div>

And then inside your JavaScript, setup a function to detect those:

var applyMapContainerHeight = function() {
  var height = $(window).height();
  $("#map-container").height(height);
};

document.ready(function() {
  applyMapContainerHeight();
});

$(window).resize(function() {
  applyMapContainerHeight();
});