нужен липкий заголовок и нижний колонтитул, когда содержимое слишком велико

1 jb10210 [2012-03-20 14:41:00]

Я создал пользовательскую таблицу, используя div (было только решение из-за слишком сложного поведения). Но у меня проблема с заголовком и нижним колонтитулом.

Таблица html в основном проста:

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

Мне нужно следующее: когда содержимое внутри таблицы не слишком велико для просмотра без полосы прокрутки, заголовок будет только сверху, а нижний колонтитул чуть ниже содержимого (поэтому он не будет прикреплен к нижней части контейнера).
Но когда содержимое таблицы расширяется (либо при загрузке страницы с новыми данными, либо путем расширения содержимого таблицы с помощью javascript/jQuery), мне нужно, чтобы заголовок находился в верхней части контейнера, а нижний колонтитул внизу контейнера, в то время как содержимое может прокручиваться без перекрытия верхнего/нижнего колонтитула.

Я много искал по этому поводу, но не нашел достойного решения, есть ли способ решить это (как можно проще) с помощью css и/или javascript/jquery?

Изменить Вот базовый пример того, что я имею в виду: jsFiddle

Если вы нажмете span в примере, верхний и нижний колонтитулы должны быть зафиксированы в верхней и нижней частях контейнера. Но как определить увеличение размера?

javascript jquery css footer sticky-footer

Оригинал вопроса (на английском)

2 ответа

4 Решение Supr [2012-03-20 15:04:00]

.offset() + .scrollTop()= DISCO

В основном (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);

Другими словами, если верх таблицы находится над scrollTop, тогда поместите заголовок на scrollTop, иначе верните его в верхнюю часть таблицы. В зависимости от содержимого остальной части сайта вам также может потребоваться проверить, прокручивается ли вы полностью за пределами таблицы, так как тогда вы не хотите, чтобы заголовок оставался видимым.

И не забывайте о $(window).height() для того, чтобы сделать то же самое с нижним колонтитулом.

Оригинал ответа (на английском)

0 austincheney [2012-03-20 14:48:00]

Это полное нарушение семантики языка, и в результате оно, вероятно, полностью разрушает всю доступность. Вместо этого используйте таблицу HTML.

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

Сказать, что это невозможно в вашем текущем коде/программировании, означает, что вам нужно полностью пересмотреть свой подход. Сначала верните HTML-код, а затем просмотрите презентацию позже. Если вы слишком заняты обсуждением презентации перед тем, как будете удовлетворять потребности или структуру своего контента, ваша презентация, скорее всего, будет терпеть неудачу.

Оригинал ответа (на английском)