Make Div larger than another by certain amount with jquery

[horrigan97]

Okay so here’s my problem, essentially I have two divs stacked on top of one another, using z-index. I did this because the back one is slightly opaque, and the front one will have content. Basically what I want is something like equal fluid height, but instead of having them equal, i want the back one to be greater by 20px in every direction.

This is what I’ve used to make things equal:

(function ($) {

 $(document).ready(function() {
    equalHeight($("#back"),$("#content"));

 });

 function equalHeight(one,two) {
     var tallest = 0;
     tallest=one.height();
     if (tallest < two.height()) {
     tallest=two.height();
     }
     one.height(tallest);
     two.height(tallest);

     }

}(jQuery));

And this is what have used to make something bigger than another:

$('#back').height(function (index, height) {
    return (height + 40);
});

What i keep running into though is that it makes both divs bigger but equal.
Any ideas?
ps- new-ish to jquery, so if you have an answer please explain so I can learn.

Thanks in advance!

[Alen]

This might give you some ideas: http://codepen.io/alenabdula/pen/viwCb

[Paulie_D]

If you are using absolute positioning could you not use calc? in the CSS rather than JS/JQuery?

width:calc (100% + 40px)

etc.

Just wondering.

Hmm…seems you can: http://codepen.io/Paulie-D/pen/CdJHf/

[horrigan97]

Found a solution, I think I was over thinking it a bit, I don’t know if the css calc would work, but I’ll look into it, but thanks for all the help, and here was my solution:

$(window).ready(function(){

var height = $("#content").height();
var finalHeight = (240 + height);

$("#background").css("height", finalHeight);

});

[Author]

Posts