javascript - Openlayers map not resizing correctly on initial load. Resizes fine after manual browser resize -

i have basic openlayers (version 3.7.0) map embedded in html page created using dojo toolkit (verions 1.10.4). components load, initial map stretched. when browser window resized, map resizes correctly , stretching issue disappears. appears though happening because map gets loaded before various html elements done rendering/resizing. i'm css newbie, i'm not 100% sure.

below 2 screenshots, 1 showing how map appears when first loads, second shown result after manually resizing browser slightly.

stretched map correct map display after manual browser resize

the live application can accessed here.

the css application can accessed here.

the javascript map can found here.

go same problem on twitter-bootstrap , responsive full width/height maps. try use map.updatesize() or map.setsize()

    settimeout(function () {         map.updatesize();     }, 200); 

maybe helps. me didn't used jquery $(window).height(); add correct height map-container.