1

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);
}).trigger("resize");

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

Good - https://jsfiddle.net/0ggr3ptv/1/

Bad - https://jsfiddle.net/oed11Lzm/1/ .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

Tomas
  • 123
  • 2
  • 14

2 Answers2

1

Use

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.

Community
  • 1
  • 1
StardustGogeta
  • 3,331
  • 2
  • 18
  • 32
0

You can check if it is number or not using isNAN() d = isNaN(d) ? 0 : d;

See updated fiddle: https://jsfiddle.net/oed11Lzm/2/

Rohit
  • 1,794
  • 1
  • 8
  • 16