Ryan Michaels Ryan Michaels - 1 year ago 82
Javascript Question

setting min-height via jquery

This is the code I'm trying to use in order to set the height of a background div to always cover at least the background of the maindiv + the footer I have set up.

var bgheight = $('.maindiv').css("height");
$('#background').css('min-height', bgheight+'75px');

For some reason the code won't even apply to the #background div and I'm starting to run out of ideas.

When I do something like this

var bgheight = $('.maindiv').height();

The style is applied but the min-height is gigantic, like almost 50000px tall.

Any ideas?

Answer Source

You are making a string concatenation, not a sum.

Try this:

var bgheight = $('.maindiv').height();
$('#background').css({'min-height': (beheight + 75) + 'px'});

To ensure you are not concatenating strings, you can set Number() function.

var bgheight = Number($('.maindiv').height());
$('#background').css({'min-height': (beheight + 75) + 'px'});

OR (two parameters instead of object)

$('#background').css('min-height', (beheight + 75) + 'px');