Chân trang in ở cuối trang trong safari

Tôi đang cố định vị trí phần tử div (chân trang) ở cuối trang được in. Trong firefox, điều này hoạt động tốt và div sẽ nằm dọc theo cuối trang in.Chân trang in ở cuối trang trong safari

Tuy nhiên, trong Safari, chân trang sẽ di chuyển lên trang in nếu cửa sổ trình duyệt không cao lắm. ví dụ. nếu cửa sổ trình duyệt cao 200px thì chân trang nằm trên bản in ra khoảng 200px. Nếu trình duyệt cao 400px, nó sẽ vẽ chân trang 400px xuống dưới trang.

Tôi muốn có được hành vi tương tự trong Safari khi tôi có thể truy cập Firefox nếu có thể?

Mã cơ bản tôi đang sử dụng cho điều này là:

<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: Tôi rất vui nếu các giải pháp đòi hỏi một hack ... nó chỉ cần làm việc trong Safari

Nguồn

2010-09-21 Richard

tôi chỉ in điều này trong Chrome (cùng một công cụ hiển thị như Safari) và dòng hiển thị ở dưới cùng ...

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

Lưu ý rằng tôi có media="print" trên thẻ kiểu. Để biết thêm về điều này, hãy đọc Going to Print trên ALA.

Nguồn

2010-09-21 13:44:11

Cảm ơn. Tôi đã không nhận ra bạn có thể chỉ định một kích thước về inches/cm. – Richard

Các đơn vị tuyệt đối trong CSS: http://www.w3.org/TR/css3-values/#absolute-lengths –

Ống khói thánh! Chỉ cần thêm chiều cao/chiều rộng tính bằng inch vào thân {} cho phép Chrome 26 thu nhỏ trang web một cách kỳ diệu để vừa với trang in. Tôi không có ý tưởng hỗ trợ in ấn của nó là như vậy ... tuyệt vời. Điều này đơn giản hóa triệt để các hacks CSS tôi đã sử dụng. Cảm ơn bạn rất nhiều vì đã nhắc tôi về sự hỗ trợ của CSS về inch, ông Stodola. –

Bạn đã thử phiên bản này chưa?

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

Tôi biết nó hoạt động trong các trình duyệt, nhưng không chắc chắn về in ấn.

Nguồn

2010-09-21 13:47:08 Alex

Đây là mã tôi sử dụng. Lưu ý rằng tôi đang đặt cả html và chiều cao cơ thể thành 100% cần thiết cho Chrome và Safari.

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

Nguồn

2012-08-15 05:16:08 tim

Chân trang in ở cuối trang trong safari

Trả lời

Các vấn đề liên quan