How can I make my footer stay at the bottom with a dynamically re-sizable form?

I have a form that adds rows in with the jQuery .afer() method (on the push of a button). My footer is always positioned at the bottom of the page when it loads, but if I click the button enough times, the footer stays where it was, and it overlaps the rows. How can I make it recognize that the table is getting larger, and it needs to move down? I am willing and comfortable using solutions involving CSS or JavaScript.

CSS

.footer
{
    position:absolute;
    bottom:0px;
    width:100%;
}

Jquery

$(".gameSchedule .addEve开发者_运维技巧nt").bind('click', function () {
    $(".gameSchedule tr:nth-child(2)").after('<tr><td><input type="text"</td><td><input type="text"</td><td><input type="text"</td><td><input type="text"<td><td><input type="text"</td></tr>');
});

HTML

<form name="gameForm" class="gameSchedule"><!--FORM FOR GAMES-->
<table  >
    <tr>
        <td colspan="5">
            <table>
                <tr>
                    <td align="left">Team Name</td>
                    <td><input type="text" /></td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>Date</td>
        <td>Time</td>
        <td>Opponent/Event</td>
        <td>H/A</td>
        <td>Location</td>
    </tr>
    <tr>
        <td><input type="text"</td>
        <td><input type="text"</td>
        <td><input type="text"</td>
        <td><input type="text"</td>
        <td><input type="text"</td>
    </tr>
    <tr>
        <td colspan="2"><input type="button" class="addEvent" value="Add Event"/></td>
    </tr>
</table>
</form>

One way is to put your footer in a div with an id of 'footer', Then use this jquery.

$(window).bind("load", function () {

    var footerHeight = 0,
       footerTop = 0,
       $footer = $("#footer");

    var contentHeight = 0,
       contentTop = 0,
       $content = $("#content");



    positionFooter();

    function positionFooter() {

        footerHeight = $footer.height();
        footerTop = ($(window).scrollTop() + $(window).height() - footerHeight) + "px";

        contentHeight = $content.height();
        contentTop = ($(window).scrollTop() + $(window).height() - contentHeight) + "px";


        if (($(document.body).height() + footerHeight + contentHeight) < $(window).height()) {
            $footer.css({
                position: "absolute"
            }).animate({
                top: footerTop
            }, 0)
        } else {
            $footer.css({
                position: "static"
            })
        }
    }
    $(window)
           .scroll(positionFooter)
           .resize(positionFooter)
});

Solved my own problem. This works like a charm!

CSS

#Content{
    width:100%;
    min-height:100%;
}

jQuery

$(document).ready(function () {
    var docHeight = $('#content').height();
    var wantedHeight = docHeight - 376;/*Minus header and footer combined*/ 
    $('#content').css({ "min-height": wantedHeight });
});

HTML

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>