jquery - 如何使用可动态调整大小的表单使页脚停留在底部？

Question

我有一个表单，它使用 jQuery .afer() 方法(按下按钮)添加行。我的页脚在加载时始终位于页面底部，但如果我点击按钮的次数足够多，页脚会保持在原来的位置，并与行重叠。我怎样才能让它认识到 table 越来越大，需要向下移动？我愿意并乐于使用涉及 CSS 或 JavaScript 的解决方案。

CSS

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

查询

$(".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

一种方法是将页脚放在一个 id 为“footer”的 div 中，然后使用这个 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)
});