How to calculate the height of my tabs with jquery to lower the footer down

I created several tabs that are absolutely positioned, because of this my footer will not push. I do not want the tab container to be up to par in my CSS, as the height of the content will be different.

I want to find a way to calculate the contents of a div, and then apply the style to my .tabs class so that the footer drops below the contents of my tabs, giving it a height. Can someone help jquery / javascript newbie

here is my html:

<article class="tabs">
    <section class="current">
        <h3>Documents</h3>
        <div>
            <p >content</p>
        </div>
    </section>
    <section>
        <h3>Info</h3>
        <div>
            <p>content1</p>
        </div>
    </section>
    <section>
        <h3>Credentials</h3>
        <div>
            <p>A credentials tab content2</p>
        </div>

    </section>
</article>

here is my script:

  <script type="text/javascript">
    $(function(){
        // Fast and dirty
        $('article.tabs section > h3').click(function(){
            $('article.tabs section').removeClass('current');
            $(this)
            .closest('section').addClass('current');
        });
    });

</script>

UPDATE: $(".tabs .current").find("div").height(); $(".tabs").css("height"," .height");

i'VE script, div, , div. SO , div, ? , div.