Question

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 .addEvent").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>

Answer 1

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>