2013-07-05 13 views
11

html web sayfasının her sayfasının altına bir altbilgi yazdırılması isteniyor (tarayıcıdaki asıl sayfa değil). Bunu yapmanın herhangi bir yolu var mı? (IE üzerinde çalışmalı ve IE iyi durumda)Tüm HTML sayfalarının altında HTML altbilgisi IE'de yazdırılıyor

Sabit taban kullanmayı denedim, ancak içerik altbilgiyle çakışıyor.

Boşluk hesaplamak için javascript kullanmayı denedim ve boş bir boşluk verdim: altbilgi% sayfa yüksekliğinin altından kullanıyordum = 0, Gerekli boşluğu ekleyin. Ancak altbilginin altının değeri ve gerekli beyaz alan, eleman tipindeki değişiklikle değişiyor gibi görünmektedir.

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"); 

Tabloyu kullanmayı denedim, sonuncu hariç tüm sayfalar için iyi çalışıyor.

Diğer birkaç kenar boşluğu ve bu gibi ince ayarları denedim ama çalışmadılar.

Aslında, altbilginin, mümkün ise yalnızca baskının son sayfasının en altında görüntülenmesini istiyorum.

cevap

12

kullanın.

uzun araştırma ve yoğun çalışır (özellikle deneme yanılma yöntemi), sadece son sayfanın altındaki altbilgi ayarlamak için mantık aşağıdaki kullanılan sonra: -

css olarak
  1. : @media print { konum: sabit; üst: 0; sol: 0; z-indeksi-1; } Ad IE, her sayfanın altında görüntüledi ve z-endeksi ile arka plana gönderildi. Yine de, IE'deki metnin arka planı çıktı olarak şeffaftı, bu nedenle metin altbilginin üstünde yer alıyordu. Üste | Böylece, görüntünün arka planı olarak hareket etmek için 1px'lik 1px'lik mutlak üst sol konumda beyaz görüntü kullanılır.

  2. Görüntüdeki yükseklik ve genişliği, içeriğin sahip olduğu div yüksekliği ile aynı olacak şekilde ayarlamak için javaScript kullanılır.

html:

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

css:

@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 ALT KISMINA FOOTER ALMAK İÇİN RY SAYFA ben KULLANILAN: (2 Senaryo)

css:

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

Bu yazının zamanından itibaren, bu çözüm Chrome'da çalışmaz. – Rap

+1

Doğru. Soru, özellikle IE ve IE için sorulmuştur. –

+0

Başlığı ve etiketleri buna göre güncelledim, OP bunu bir dahaki sefere yapmayı düşünebilir. mod bu yardımcı olmayan yorumları da işaretleyebilir ve kaldırabilir. –

4

Belki böyle bir şey?

<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"; 
} 

başkasının bir çözüm ihtiyacı varsa ben her ihtimale karşı benim kendi soru yanıtlama yerine vücudun belgenin sonunda sahip son öğe ...

+0

çok ilginç. Teşekkürler –

+1

İlginç bir yaklaşım, ancak birden fazla sayfanız varsa maalesef çalışmıyor. – tftd