@media प्रिंट div: शीर्षलेख पर ओवरलैपिंग पृष्ठ टेक्स्ट को कैसे हल करें?

Question

मैं फ़ायरफ़ॉक्स में पृष्ठ में स्क्रीन प्रिंट करते समय प्रत्येक पृष्ठ पर एक शीर्षलेख मुद्रित करने के लिए @media का उपयोग कर रहा हूं। मैं अपने सीएसएस इस तरह की स्थापना की है:

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

समस्या दूसरे पृष्ठ की सामग्री प्रिंट div हैडर के साथ ओवरलैप हो रहा है। (यानी, दूसरे पृष्ठ पर, हेडर पेज सामग्री को नीचे मजबूर नहीं करता है, और इसलिए मुझे पाठ पर लिखे गए पाठ मिलते हैं)। क्या इसे संभालने का कोई तरीका है?

Answer 1

position: fixed; के साथ कुछ स्थिर (या सापेक्ष) सामग्री को कभी भी धक्का नहीं देता है। या तो यह सुनिश्चित करने के लिए स्टाइल है कि वे ओवरलैप नहीं करते हैं ... या वे ओवरलैप करते हैं।
this example JSFiddle देखें, जो आपके सीएसएस का उपयोग करता है।

समस्या कहीं और है।
हेडर पहले पृष्ठ में टेक्स्ट के साथ ओवरलैप नहीं करता है? क्या आपके पास पाठ को धक्का देने वाला कुछ है? मार्जिन टॉप? क्या?

क्या मूल या सरलीकृत उदाहरण साझा करना संभव है? (आप JSFiddle उपयोग कर सकते हैं।)

Answer 2

Uhm मुझे लगता है कि अपने

position:relative 

बजाय

position:fixed 

Answer 3

का उपयोग करना चाहिए अपने हैडर मीडिया शासन को यह करें: सामग्री के लिए क्रम में bottom:3em; 3em संशोधित फिट करने के लिए।

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

Answer 4

सीएसएस कुंजी "बॉक्स-सजावट-तोड़" "क्लोन" करने के लिए सेट जब मदद मिलेगी:

फिर अपने सामग्री क्षेत्र के लिए शासन के लिए एक अलग div चयनकर्ता जोड़ें। देखें: CSS Fragmentation

आप एक मार्जिन शीर्ष पर और अपने शीर्ष लेख और पाद के आकार में नीचे के साथ अपनी सामग्री के चारों ओर एक कंटेनर वर्ग बना सकते हैं और फिर इस कंटेनर पर "क्लोन" बॉक्स-सजावट-ब्रेक निर्धारित किया है।

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