2011-07-20 49 views
2

我有一個表單,用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> 
+0

,你可以做一個http://jsfiddle.net更多的HTML和CSS。查看頁腳在html中的位置會很有幫助。 – tw16

回答

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> 
1

一種方法是把你的頁腳在一個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) 
}); 
+0

jquery是否需要在$(document).ready函數中?當我嘗試它時,這個例子並不奏效。 – ecollis6

+0

只需要在一個腳本標籤..您的jQuery腳本包括需要在那裏。 –

+0

我不能得到這個工作 – ecollis6