Задать маржу/дополнение для каждой страницы для печати (html/css)?

Question

У меня есть много контента на странице, на котором у меня нет контроля над тем, где она ломается. И я разместил какое-то содержимое, используя position:fixed на каждой странице в виде верхнего/нижнего колонтитула, но он перекрывается с текстом. Я попытался решить дублирование с использованием поля и заполнения двумя способами.

Когда я добавил запас с помощью @Page

@page { 
    margin: 2cm; 
} 

Он работает на каждой странице, как он говорит, но мои колонтитулы также отнимутся от края.

Так что я попытался добавление края тела используя тегу

body { 
    margin: 2cm; 
    /* padding: 2cm; */ 
} 

он работает путем добавления 2 см верхнего поля на первой странице и 2 см нижнего края на последней странице. Но не между страницами.

Можно ли указать маржу/заполнение каждой страницы?

Answer 1

Ваш первый вариант был правильно, что вам нужно сделать, просто разместите свой верхний и нижний колонтитул как running.

@page { 
    margin: 2cm; 

    @top-center { 
     content: element(pageHeader); 
    } 

    @bottom-center { 
     content: element(pageFooter); 
    } 
} 

#pageHeader{ 
    position: running(pageHeader); 
} 

#pageFooter{ 
    position: running(pageFooter); 
} 

Answer 2

@page { 
    padding: 2cm; 
    margin: 3cm;  
} 

Answer 3

Попробуйте это ...

Убедитесь, что таблицы стилей, назначенный для печати. Это может быть отдельной таблица стилей, или вы можете использовать загрузочные таблицы стилей:

<link rel="stylesheet" type="text/css" media="print" href="print.css"> 

или

<link rel="stylesheet" type="text/css" href="bootstrap.min.css"> # Note there's no media attribute 

Затем вы можете написать свои стили для принтеров в отдельной таблице стилей или долевые один с помощью медиа запросов как:

@media print { 
/* Your styles here */ 

}