Как я могу напечатать блок div HTML один раз внизу страницы и перейти на следующую страницу, если он перекрывает предыдущие элементы?

Как напечатать элемент div так, чтобы он располагался внизу страницы, на которой он находится, но не был нижним колонтитулом и должен быть напечатан только один раз, независимо от того, сколько страниц осталось напечатать (когда я устанавливаю его как нижний колонтитул, видимо, начал печатать себя на каждой странице)

Кроме того, если на странице недостаточно места для печати, необходимо перейти на вторую страницу.

Что это такое

У меня есть блок div, который является легендой для таблицы. Он более подробно описывает поля таблицы.

введите здесь описание изображения

Вещи, которые я пробовал до сих пор

Я пробовал подход с фиксированным нижним колонтитулом:

@media print {
    #legend {
        position: fixed; 
        bottom: 0;
    }
 }

Каким-то образом он начал печатать мою легенду на всех страницах, а не только на первой странице, где она мне нужна. Также, когда моя таблица слишком длинная, она перекрывает легенду. Это нежелательно. Я не уверен, что делать дальше.


html css print-css
person Dennis    schedule 04.04.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Кажется, я добился некоторого успеха с

@media print :first {
    #legend {
        position: absolute;
        bottom: 0;
    }        
}

а затем программно разбить таблицу в моем коде, где, т.е. после строки 25, я вставляю класс в строку, чтобы вызвать разрыв страницы. Или после строки 25 остановите эту таблицу (</table>), перезапустите новую 2-ю (<table>), которая перетечет на следующую страницу

person Dennis    schedule 04.04.2019