Start electronics 
Good evening, this is Bono.
If you use a CSS library such as Bootstrap, it may collapse even if you specify an element size of 100% or something like that.
It seems that this kind of phenomenon is especially likely to occur when APIs such as Google Maps are used together.
How to deal with it
Here is a case of a navigation bar at the top of the screen in Twitter Bootstrap.
When created normally, even if 100% is specified for the height, it can slide down by the amount of the navigation bar.
In such a case, just subtract the height of the navigation bar (50px in this case) after loading the screen once, as shown below.
Assuming that the window size can be changed by the user, $(window).resize(function(){}) is also specified.
$(function(){
//navbar-top の分だけbodyをリサイズ
var wh = $(window).height();
$("body").css("height", wh - 50);
$(window).resize(function(){
var wh = $(window).height();
$("body").css("height", wh - 50);
console.log(wh);
});
});
The following sites were also consulted.
JavaScript program memo to detect window resizing and resize images according to size
＼電子工作歴9年の私のイチ押し！ELEGOOの電子工作キット／
