Tomas Tomas - 10 months ago 60
CSS Question

Jquery - Calculating height sum of elements

To calculate height sum of elements and apply as "min-height" on .body div I am using:

$(window).on("resize", function () {
var a = $("body").outerHeight();
var b = $(".header").outerHeight(true);
var c = $(".footer").outerHeight(true);
var d = $(".bottom").outerHeight(true);
$(".body").css("min-height", a - b - c - d);

It works fine if all elements exists on html, but if one element missing it's broken.

Good -

Bad - .bottom div is missing.

How to exclude missing elements or let them be 0?

Using jQuery 3.1.1 and .bottom div becomes undefined. How can I fix it? Thanks

Answer Source


var d = $(".bottom").outerHeight(true) || 0;

Instead of

var d = $(".bottom").outerHeight(true);

to make the default value set to 0. There is more information that can be found here.