Создание верхних и нижних колонтитулов страниц с использованием CSS для печати - PullRequest
Новая
       46

Создание верхних и нижних колонтитулов страниц с использованием CSS для печати

44 голосов
/ 16 марта 2012

Я создаю PDF с помощью Flying Saucer (который выводит CSS / HTML в iText в PDF) и пытаюсь использовать CSS3, чтобы применить верхний и нижний колонтитулы к каждой странице.

Я бы хотел поместить этот div в верхний левый угол каждой страницы: 

<div id="pageHeader">
    <img src="..." width="250" height="25"/>
</div>

Мой CSS выглядит примерно так: 

@page {
    size: 8.5in 11in;
    margin: 0.5in;

    @top-left {
        content: "Hello";
    }
}

Есть лидля меня способ поместить этот div в content?

Ответы [ 2 ]

40 голосов
/ 16 марта 2012

Размещение элемента в верхней части каждой страницы: 

@page {
  @top-center {
    content: element(pageHeader);
  }
}
#pageHeader{
  position: running(pageHeader);
}

См. http://www.w3.org/TR/css3-gcpm/#running-elements (работает в "Летающей тарелке")

8 голосов
/ 30 ноября 2017

Чтобы включить и верхний и нижний колонтитулы на страницах (уточняющий отличный ответ от @Adam): 

<style>
@page {

    margin: 100px 25px;
    size: letter portrait;

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

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

#pageHeader{
    position: running(pageHeader);
}

#pageFooter{
    position: running(pageFooter);
}

</style>
<body>
    <header id="pageHeader">something from above</header>
    <footer id="pageFooter">lurking below</footer>

    <div>meaningful rambling...</div>
</body>

ПРИМЕЧАНИЕ. Чтобы нижний колонтитул повторялся на каждой странице, может потребоваться определить его ДО другой основной текст (для многостраничного содержимого)

...