如何使頁腳停留在動態縮放窗體的底部？

Question

我有一個表單，用jQuery .afer（）方法（按下按鈕）添加行。當頁面加載時，頁腳始終位於頁面的底部，但如果單擊該按鈕的次數足夠長，頁腳將停留在原來的位置，並與行重疊。我怎樣才能讓它認識到桌子越來越大，它需要向下移動？我願意並且樂於使用涉及CSS或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

解決了我自己的問題。這就像一個魅力！

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> 

Answer 2

一種方法是把你的頁腳在一個div與 '頁腳' 的ID，然後用這個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) 
});