आईई

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

मैंने निश्चित तल का उपयोग करने की कोशिश की, लेकिन सामग्री पाद लेख के साथ ओवरलैप हो गई।

मैंने अंतरिक्ष की गणना करने के लिए जावास्क्रिप्ट का उपयोग करने की कोशिश की और ऊंचाई को खाली डिवीजन दिया: पाद लेख% पृष्ठ की ऊंचाई के नीचे यदि उपयोग किया जा रहा था! = 0, आवश्यक अंतर जोड़ें। लेकिन पाद लेख के नीचे का मूल्य और आवश्यक सफेद स्थान तत्वों के प्रकार में परिवर्तन के साथ बदलता प्रतीत होता है।

var printPageHeight = 1900; 
var mFooter = $("#footer-nt"); 
var bottomPos = mFooter.position().top + mFooter.height(); 


var remainingGap = (bottomPos <printPageHeight) ? (printPageHeight -bottomPos) :  printPageHeight - (bottomPos % printPageHeight); 


$("#whiteSpaceToPositionFooter").css("height", remainingGap+"px");

मैंने तालिका का उपयोग करने की कोशिश की, सभी पृष्ठों के लिए अच्छी तरह से काम करता है, अंतिम को छोड़कर।

मैंने कुछ अन्य मार्जिन और इस तरह के बदलाव की कोशिश की लेकिन वे या तो काम नहीं कर पाए।

मैं वास्तव में चाहता हूं कि अगर संभव हो तो प्रिंटर के अंतिम पृष्ठ के नीचे केवल फूटर प्रदर्शित किया जाए।

स्रोत

2013-07-05 Anup Kattel

का उपयोग मैं सिर्फ मामले में अपने ही सवाल का जवाब कर रहा हूँ अगर किसी और को एक समाधान की जरूरत है।

के बाद एक लंबे अनुसंधान और गहन कोशिश करता (मुख्य रूप से परीक्षण और त्रुटियों), मैं निम्नलिखित तर्क केवल पिछले पृष्ठ के तल पर पाद लेख सेट करने के लिए प्रयोग किया जाता है: -

सीएसएस में: @media प्रिंट { स्थिति: तय; शीर्ष: 0; बाएं: 0; जेड-इंडेक्स -1; } विज्ञापन आईई ने इसे प्रत्येक पृष्ठ के नीचे प्रदर्शित किया, और जेड-इंडेक्स द्वारा पृष्ठभूमि में भेजा गया था।
फिर भी, आईई में पाठ की पृष्ठभूमि प्रिंट आउट में पारदर्शी थी, इसलिए पाठ पाद लेख के शीर्ष पर था। इसलिए, छवि की पृष्ठभूमि के रूप में कार्य करने के लिए पूर्ण शीर्ष बाएं स्थिति में 1px की 1px की सफेद छवि का उपयोग किया गया।
छवि की ऊंचाई और चौड़ाई को सेट करने के लिए प्रयुक्त जावास्क्रिप्ट का उपयोग किया गया था जिसमें सामग्री की div की ऊंचाई थी।

एचटीएमएल:

<body> 
    <div id="wrapper"> <!-- not necessary --> 
     <img scr="./img/white.png" id="whiteBg" /> 
     <div id="content"> 
      <!-- content here --> 
     </div> 
    </div> 
    <div id="footer"> 
    </div> 
</body>

सीएसएस:

@media screen { 
    #whiteBg { 
     display: none; 
    } 
} 

@media print { 
    #whiteBg { 
     display: block; 
     position: absolute; 
     top: 0; 
     left: 0; 
     z-index: -1; //to send it to the background 
    } 
    #wrapper { 
     padding-bottom: (the size of the footer, to make footer visible on last page). 
    } 
    #footer { 
    position: fixed; 
    bottom: 0; 
    } 
}

jQuery:

@('#whiteBg').height( $('#content')).height() );

EVE के तल पर FOOTER पाने के लिए RY पृष्ठ, मैं उपयोग किया गया: (2 परिदृश्य)

सीएसएस:

@media print { 
    #footer { 
    position: fixed; 
    bottom: 0; 
    } 
    body { 
    margin: x x y x; (y should reflect the height of the footer); 
}

स्रोत

2013-07-08 04:20:46

इस लेखन के समय के रूप में, यह समाधान क्रोम में काम नहीं करता है। – Rap

यह सही है। सवाल विशेष रूप से केवल आईई और आईई के लिए पूछा गया था। –

मैंने तदनुसार शीर्षक और टैग अपडेट कर दिए हैं, ओपी अगली बार ऐसा करने पर विचार कर सकता है। mod ध्वजांकित हो सकता है और इन अनुपयोगी टिप्पणियों को भी हटा सकता है। –

शायद ऐसा कुछ हो सकता है?

<link rel="stylesheet" href="print.css" type="text/css" media="print" /> /* this css file is only for printing purposes*/ 

body:after { 
    content: "I am the footer"; 
}

पिछले तत्व आप शरीर के बजाय दस्तावेज़ के अंत में है ...

स्रोत

2013-07-05 07:31:48

बहुत ही दिलचस्प। धन्यवाद –

दिलचस्प दृष्टिकोण, लेकिन दुर्भाग्यवश काम नहीं करता है यदि आपके पास एकाधिक पृष्ठ हैं। – tftd

उत्तर

संबंधित मुद्दे