Looking for a jQuery solution to control container height in 20px increments rounding up to nearest 20px dimension

I have a design conundrum. The site specs I have in front of me (and support psd files) have a main body container with stitched edges. I also have dynamic content and know that the stitches will get clipped in odd places as the height adjusts to the content and this will look like crap.

What I would like ideally is to control and round up the container height in a predictable way so that I know that the container will always be divisible by say 20px so that my background slice wont ever get clipped in between a stitch.

So in classic fashion I will have a top cap at a set height of 30px, a bottom cap the same and开发者_如何学Go then a 20px slice that will repeat to fill the main content area. This content area height is what I need to always be divisible by 20.

<div id="container">
<div id="top_cap"></div>
<div id="content_area">
[CONTENT]
</div><!--END CONTENT AREA-->
<div id="bottom_cap"></div>
</div><!--END CONTAINER-->

Any ideas are most welcome.

http://jsfiddle.net/loktar/b52qT/2/

Better demo by thirtyDot http://jsfiddle.net/d4Q3S/

$(function(){
    var curHeight = parseInt($("#content_area").height()),
        newHeight = Math.ceil(curHeight/20) * 20;
    $("#content_area").height(newHeight );
});

Use jquery to take the height mod 20, like so:

var difference = 20 - ($("#content_area").height() % 20);

Then, add that to the height of your content area:

$("#content_area").height( $("#content_area").height() + difference);

You could combine those two statements easily. However, as a disclaimer ensure that height is not including your borders, etc, as you may want to subtract those from the .height() when calculating the difference.