@media print div: Cách giải quyết văn bản trang trùng lặp trên tiêu đề?

Question

Tôi đang sử dụng @media để in tiêu đề trên mỗi trang khi in một màn hình trong trang trong Firefox. Tôi đã thiết lập css của mình như sau:

@media print { 
    div.printDivHeader { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 1.0em; 
    position: fixed; 
    display: block; 
    width: 100%; 
    height: auto; 
    top: 0; 
    } 
} 

Vấn đề là nội dung của trang thứ hai chồng chéo với tiêu đề div in. (tức là, trên trang thứ hai, tiêu đề không ép buộc nội dung trang xuống và vì vậy tôi nhận được văn bản được viết trên văn bản). Có cách nào để xử lý việc này không?

Answer 1

Nội dung nào đó có position: fixed; không bao giờ đẩy nội dung tĩnh (hoặc tương đối). Hoặc là có kiểu dáng để đảm bảo chúng không trùng lặp ... hoặc chúng trùng nhau.
Xem this example JSFiddle, sử dụng css của bạn.

Sự cố nằm ở một nơi khác.
Tiêu đề không trùng lặp với văn bản trong trang đầu tiên như thế nào? Bạn có cái gì đó đẩy văn bản xuống? Margin-top? Gì?

Có thể chia sẻ ví dụ gốc hoặc đơn giản không? (Bạn có thể sử dụng JSFiddle.)

Answer 2

Uhm Tôi nghĩ rằng bạn nên sử dụng

position:relative 

thay vì

position:fixed 

Answer 3

Thêm phần này vào header quy tắc phương tiện truyền thông của bạn: bottom:3em; sửa đổi 3em theo thứ tự về nội dung để phù hợp.

Sau đó thêm một chọn div riêng biệt để các quy tắc cho khu vực nội dung của bạn:

div.printDivContent { 
    position: relative; 
    width: 100%; 
    top:3em; //match size of header 
    left:0px; 
    right:0px; 
} 

Answer 4

Mấu chốt CSS "hộp trang trí-break" có thể giúp khi thiết lập để "nhân bản". Xem: CSS Fragmentation

Bạn có thể tạo lớp vùng chứa quanh nội dung của mình với lề trên và dưới cùng với kích thước đầu trang và chân trang và sau đó đặt hộp trang trí-vỡ thành "sao chép" trên vùng chứa này.

#content { 
    box-decoration-break: clone; 
    margin-bottom: 90px; 
}