CODEWITHSUNDEEP
jqueryheightviewport
patrick
patrick

Reputation: 657

jQuery: Height calculation for DIV fill remainder of viewport

I am trying to calculate the remaining height of the window, minus the height of all the other page elements, so that I can assign said height to a DIV. I think I have the structure correct, I'm just not sure about the syntax.

$('#container').height($(window).height() - $('#a, #b, #c, #d').height());

https://jsfiddle.net/0gtkgLem/4/

Upvotes: 1

Views: 1944

Answers (2)

Jasper
Jasper

Reputation: 76003

jQuery's .height() only gets the height of the first element in the set of elements you select. So you need to select each one separately and get it's height on its own.

From the docs:

Get the current computed height for the first element in the set of matched elements or set the height of every matched element.

http://api.jquery.com/height/

$('#container').height($(window).height() - $('#a').height() - $('#b').height() - $('#c').height() - $('#d').height());

Updated Fiddle: https://jsfiddle.net/0gtkgLem/2/

Upvotes: 2

cfatt10
cfatt10

Reputation: 788

I think your syntax is correct. Your jsfiddle wasn't working because you weren't including the jQuery plugin. See https://jsfiddle.net/0gtkgLem/1/

Upvotes: 0

Related Questions