[jQuery]What to do when using Bootstrap or something and the element size % specification is broken.

Medium 4352318554

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.


    //navbar-top の分だけbodyをリサイズ
    var wh = $(window).height();
    $("body").css("height", wh - 50);

        var wh = $(window).height();
        $("body").css("height", wh - 50);

The following sites were also consulted.

JavaScript program memo to detect window resizing and resize images according to size

ARK's technical note: [JavaScript]To prevent the layout from momentarily collapsing with a clatter when the screen loads.