need sticky header and footer when content is too large

问题

I created a custom table using div's (was only solution due too complex behaviour). But I have a problem with the header and the footer.

The table htmlis basically simple:

<div class="table">
  <div class="header"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>

What I need is the following: when the content inside the table is not too large to be viewed without scrollbar the header will just be at the top and the footer just below the content (so not sticky to the bottom of the container).
But when the content of the table expands (either on page load with new data or by expanding some table content using javascript/jQuery) I need the header to stick at the top of the container and the footer stick at the bottom of the container while the content can scroll without overlapping the header/footer.

I searched around a lot on this but haven't found a decent solution, is there a way to solve this (as simple as possible) using css and/or javascript/jquery?

Edit Here a basic sample of what I mean: jsFiddle

If you click the span in the example the header and footer should become fixed at the top and bottom of the container. But how do I detect the increase in size?

回答1:

.offset() + .scrollTop() = DISCO

Basically (jsfiddle demo):

function placeHeader(){ 
    var $table  = $('#table');  
    var $header = $('#header'); 
    if ($table.offset().top <= $(window).scrollTop()) {
        $header.offset({top: $(window).scrollTop()});
    } else { 
        $header.offset({top: $table.offset().top}); 
    }    
}

$(window).scroll(placeHeader);

In other words, if the top of the table is above the scrollTop, then position the header at scrollTop, otherwise put it back at the top of the table. Depending on the contents of the rest of the site, you might also need to check if you have scrolled all the way past the table, since then you don't want the header to stay visible.

And don't forget about $(window).height() for doing the same with the footer.

回答2:

This is a complete violation of the language's semantics, and as a result it likely completely destroys all accessibility. Use an HTML table instead.

<table id="mahTable" summary="some descriptive summary">
    <caption>This descriptive data visually appears outside your table.</caption>
    <thead>
        <tr><th>Header Cell</th><th>Other header cell</th></tr>
    </thead>
    <tbody>
        <tr><td>data 1</td><td>data 2</td></tr>
    </tbody>
    <tfoot>
        <tr><td colspan="2">footer here</td></tr>
    </tfoot>
</table>

To say this is not possible in your current code/programming means you entirely need to rethink your approach. Get the HTML correct first and then figure out presentation later. If you are too busy fretting over presentation before you have addressed the needs or structure of your content then your presentation will likely fail anyways.

来源：https://stackoverflow.com/questions/9786082/need-sticky-header-and-footer-when-content-is-too-large