2010-09-21 17 views
5

मैं मुद्रित पृष्ठ के नीचे एक div (पाद लेख) तत्व को स्थान देने की कोशिश कर रहा हूं। फ़ायरफ़ॉक्स में यह ठीक काम कर रहा है और div मुद्रित पृष्ठ के नीचे बैठेगा।सफारी में पृष्ठ के नीचे प्रिंट पाद लेख

हालांकि, सफारी में पाद लेख मुद्रित पृष्ठ चलाता है यदि ब्राउज़र विंडो बहुत लंबा नहीं है। जैसे। यदि ब्राउज़र विंडो 200px लंबा है तो पाद लेख प्रिंट पर लगभग 200px नीचे बैठता है। यदि ब्राउज़र 400px लंबा है तो यह पृष्ठ के नीचे फ़ूटर 400px खींचता है।

मैं सफारी में वही व्यवहार करना चाहता हूं क्योंकि यदि संभव हो तो मैं फ़ायरफ़ॉक्स में जा सकता हूं?

बुनियादी कोड मैं इस के लिए उपयोग कर रहा हूँ है:

<html> 
    <head> 
     <title>Print footer at bottom of a printed page</title> 
     <style type="text/css"> 
      * { margin:0; padding:0; } 
      html, body { height: 100% !important; } 
      #footer { height:25px; border-top:solid 1px #000; 
         position:absolute; bottom:0; } 
     </style> 
    </head> 
    <body> 
     <p>Some content on the page here</p> 
     <div id="footer">This should appear at the very bottom of the printed page</div>  
    </body> 
</html> 

संपादित करें: मैं खुश हूँ समाधान एक हैक की आवश्यकता है ... यह केवल सफारी

में काम करने के

उत्तर

9

मैं सिर्फ मुद्रित की जरूरत है क्रोम (सफारी जैसा प्रतिपादन इंजन), और लाइन में यह पता तल पर पता चला है ...

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Testing</title> 
    <style type="text/css" media="print"> 
     html, body { margin: 0; padding: 0; } 
     body { height: 11in; width: 8.5in; } 
     #footer { position: absolute; bottom: 0; } 
    </style> 
    </head> 
    <body> 
    <div id="footer"> 
     This will always print at the bottom 
    </div> 
    </body> 
</html> 

सूचना है कि मैं शैली टैग पर media="print" है। इस पर अधिक जानकारी के लिए, एएलए पर Going to Print पढ़ें।

+0

धन्यवाद। मुझे एहसास नहीं हुआ कि आप इंच/सेमी के मामले में एक आकार निर्दिष्ट कर सकते हैं। – Richard

+0

सीएसएस में पूर्ण इकाइयां: http://www.w3.org/TR/css3-values/#absolute-lengths –

+1

पवित्र smokestacks! बस शरीर में इंच में ऊंचाई/चौड़ाई जोड़ना {} क्रोम 26 को जादुई रूप से मुद्रित पृष्ठ पर फिट करने के लिए वेबपृष्ठ को स्केल करने देता है। मुझे नहीं पता था कि इसका प्रिंट समर्थन इतना था ... कमाल। यह मूल रूप से सीएसएस हैक का उपयोग कर रहा था जिसे मैं उपयोग कर रहा था। श्री स्टोडोला, इंच के सीएसएस के समर्थन के बारे में मुझे याद दिलाने के लिए बहुत बहुत धन्यवाद। –

0

क्या आपने इस संस्करण को आजमाया है?

http://www.themaninblue.com/experiment/footerStickAlt/

मैं इसे ब्राउज़रों में काम करता है पता है, लेकिन प्रिंट बारे में निश्चित नहीं।

3

यह वह कोड है जिसका मैं उपयोग करता हूं। ध्यान दें कि मैं क्रोम और सफारी के लिए एचटीएमएल और बॉडी ऊंचाई दोनों को 100% पर सेट कर रहा हूं।

@media print { 
    html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    } 
    #footer { 
    position: absolute; 
    bottom: 0; 
    } 
} 
संबंधित मुद्दे