Fußzeile am Ende der Seite in Safari drucken

Ich versuche, ein div (Fußzeile) Element an der Unterseite einer gedruckten Seite zu positionieren. In Firefox funktioniert das gut und das Div wird am unteren Rand der gedruckten Seite sitzen.Fußzeile am Ende der Seite in Safari drucken

Allerdings bewegt sich die Fußzeile in Safari die Druckseite, wenn das Browserfenster nicht sehr groß ist. z.B. Wenn das Browserfenster 200px groß ist, dann sitzt die Fußzeile auf dem Ausdruck ungefähr 200px runter. Wenn der Browser 400 Pixel groß ist, wird die Fußzeile um 400 Pixel nach unten gezogen.

Ich möchte das gleiche Verhalten in Safari erhalten, wie ich in Firefox bekommen kann, wenn möglich?

Der Grund Code, den ich dafür verwende ist:

<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>

Edit: Ich bin glücklich, wenn die Lösung einen Hack erfordert ... es muss nur in Safari arbeiten

Quelle

2010-09-21 Richard

ich gerade gedruckt dies aus in Chrome (gleichen Rendering-Engine wie Safari), und die Linie an der Unterseite zeigte ...

<!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>

Beachten Sie, dass ich media="print" auf dem Style-Tag habe. Lesen Sie dazu Going to Print auf ALA.

Quelle

2010-09-21 13:44:11

Danke. Ich wusste nicht, dass Sie eine Größe in Zoll/cm angeben können. – Richard

Absolute Einheiten in CSS: http://www.w3.org/TR/css3-values/#absolute-lengths –

Heilige Schornsteine! Einfach die Höhe/Breite in Inch zum Körper hinzufügen {} lässt Chrome 26 die Webseite magisch skalieren, um auf die gedruckte Seite zu passen. Ich hatte keine Ahnung, dass die Druckunterstützung so großartig war. Dies hat die CSS-Hacks, die ich benutzte, radikal vereinfacht. Vielen Dank, dass Sie mich an die Unterstützung von Zoll, Mr. Stodola, erinnert haben. –

Haben Sie diese Version versucht?

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

Ich weiß, es in Browsern funktioniert, sondern um Druck nicht sicher.

Quelle

2010-09-21 13:47:08 Alex

Dies ist der Code, den ich verwende. Hinweis: Ich setze sowohl HTML als auch Körpergröße auf 100%, was für Chrome und Safari benötigt wird.

@media print { 
    html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    } 
    #footer { 
    position: absolute; 
    bottom: 0; 
    } 
}

Quelle

2012-08-15 05:16:08 tim

Fußzeile am Ende der Seite in Safari drucken

Antwort

Verwandte Themen