頁眉和頁腳固定，內容滾動

我創建了this fiddle來顯示我的問題在哪裏。我想要的是在320 * 480屏幕上有一個固定的標題位置和一個固定的頁腳位置。頁眉和頁腳固定，內容滾動

內容應該可滾動，以便設置的寬度和高度不會改變。

謝謝。

來源

2010-11-17 brumbles

切記要Brandons答案「答案」。 – 2011-05-25 08:01:28

設置內容div的高度和寬度;溢出：滾動;

來源

2010-11-17 13:01:10 Mauro

http://jsfiddle.net/vJGua/13/

你只需要你的「內容」 div來的高度，並在風格overflow: auto;集。

來源

2010-11-17 13:04:06

溢出：auto是它。非常感謝。 – brumbles 2010-11-17 13:05:10

我曾經與類似的問題一段時間，但有瀏覽器兼容性問題。我終於寫了jQuery來將頭行分割成一個單獨的表，然後匹配列寬。最終結果是兩個表格看上去是一個，其中內容是可滾動的，並且標題是固定的。這並不像我希望的那樣優雅，但它似乎具有很好的跨瀏覽器兼容性。

我的標記

<table id="MyHeader"></table> 

<div style="overflow-y: auto; height: 330px;"> 

    <table id="MyDataRows"> 

    <thead> 
     <tr class="grid_header"> 
     <th>Col1</th> 
     <th>Col2</th> 
     <th>Col3</th> 
     </tr> 
    </thead> 

    <tbody> 
     <tr> 
     <td>Data</td> 
     <td>Data</td> 
     <td>Data</td> 
     </tr> 
    </tbody> 
    </table> 

</div>

我的jQuery

<script type="text/javascript">// <![CDATA[ 
$(function() { 
    /* move the table header from the datagrid outside, so it doesn't scroll" */ 
    $("#MyHeader").append($("#StudentData thead")); 
    $("#MyDataRows").css("margin-bottom", "0"); 

    var ths = $("#MyHeader th"); 
    var tds = $("#MyDataRows tr:first td"); 

    /* Reset the padding of the th's to match the td's */ 
    ths.css("padding-left", tds.first().css("padding-left")); 
    ths.css("padding-right", tds.first().css("padding-right")); 

    /* Set the widths of all the th's (except the last to acccount for scroll bar) to the corresponding td width */ 
    for (var i = 0; i < tds.length - 1; i++) { 
     ths.eq(i).width(tds.eq(i).width()); 
    } 
});

這可以很容易地適應兩個頁眉和頁腳。

更全面的解釋，請參閱我下面的帖子在這裏：Scrollable DataGrid table with Fixed Header with jQuery

來源

2011-12-09 14:20:45 Narnian

頁眉和頁腳固定，內容滾動

回答

相關問題