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();
$('#background').css({'min-height':beheight+'75px'});

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

Any ideas?

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();
$('#background').css({'min-height':beheight+'75px'});

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

Any ideas?

• javascript
• jquery
• html

Share Improve this question Follow edited May 16, 2016 at 15:37 Tushar 87.3k2121 gold badges163163 silver badges181181 bronze badges asked May 16, 2016 at 15:34 RyanRyan 4511 silver badge66 bronze badges 1

• 2 Change bgheight+'75px' ==> (bgheight + 75) + 'px' – Tushar Commented May 16, 2016 at 15:35

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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');