In chân trang bảng ở dưới cùng ở trang cuối

Question

Tôi đang sử dụng bảng để tạo chân trang trên mỗi trang (hoạt động trong Firefox, điều đó là đủ).

Một JS Fiddle: https://jsfiddle.net/j9k2xzze/

(nhấp chuột phải vào cửa sổ đầu ra -> Khung này -> Mở Khung ở New Tab Sau đó Print Preview sẽ hoạt động như bình thường.)

<table id="wrapper"> 
    <thead> 
    <tr> 
     <td id="header"></td> 
    </tr> 
    </thead> 

    <tfoot> 
    <tr> 
     <td colspan="0" id="footer"> 
      <img src="footer.jpg"/> 
     </td> 
    </tr> 
    </tfoot> 

    <tbody> 
    <tr> 
     <td id="content"> 
      <?php echo $html; ?> 
     </td> 
    </tr> 
    </tbody> 
</table> 

Nhưng trên cuối cùng trang chân trang bảng được hiển thị ngay bên dưới văn bản. Nếu văn bản ngắn hơn trang cuối cùng, chân trang sẽ bám vào nó.

Tôi thích chân trang ở phía dưới cùng trên trang cuối cùng. Đáng tiếc là phần mở rộng @page không hoạt động trong firefox hay tôi làm sai:

@page:last { 
    #footer { 
    position: absolute; 
    bottom: 0; 
    } 
} 

Answer 1

Nếu bạn chỉ hỗ trợ trình duyệt Firefox, đây là thực sự dễ dàng (bỏ qua chỉnh sửa để xem một kỹ thuật mà cũng hoạt động trong IE, nhưng ít linh hoạt hơn). Chỉ cần thêm một lề dưới lớn ở cuối nội dung của bạn. Nó phải đủ lớn để được đảm bảo chạy qua cuối trang. Trình duyệt giả sử bạn không muốn in một trang trống ở cuối tài liệu của bạn, do đó, nó cắt giảm nhiều lề khi cần để tránh nó, giữ đủ để đẩy chân trang của bạn xuống cuối trang.

Bạn có thể đặt lề trên pseudo-element để giữ cho HTML gọn gàng và bạn có thể sử dụng @media print để ngăn không cho hiển thị trên màn hình.

Đây là mã. Để xem nó hoạt động trong Firefox, hãy mở this jsfiddle, nhấp chuột phải vào đầu ra, chọn Khung này> Chỉ hiển thị Khung này và thực hiện xem trước bản in.

@media print { 
 
    #content:after { 
 
    display: block; 
 
    content: ""; 
 
    margin-bottom: 594mm; /* must be larger than largest paper size you support */ 
 
    } 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <th>PAGE HEADER</th> 
 
    </tr> 
 
    </thead> 
 
    <tfoot> 
 
    <tr> 
 
     <td>PAGE FOOTER</td> 
 
    </tr> 
 
    </tfoot> 
 
    <tbody> 
 
    <tr> 
 
     <td id="content"> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Kỹ thuật này không hoạt động trong bất kỳ trình duyệt nhưng Firefox. Trong IE, khi ngắt trang xảy ra trong một lề thẳng đứng, toàn bộ lề bị xóa - thực ra là hành vi chính xác according to the W3C (phần 13.3.3) - nhưng đừng lo lắng, hành vi của Firefox có hiệu quả giống nhau trừ khi có bảng chân trang, và trong trường hợp đó nó thực sự tốt hơn, vì vậy tôi nghi ngờ nó sẽ bao giờ thay đổi.

Chrome và các trình duyệt Webkit khác (Safari, Opera) thậm chí không hỗ trợ các chân trang lặp lại, vì vậy chúng không liên quan. Tôi đoán tôi đã không thử nghiệm phương pháp này trong Edge, nhưng tôi khá chắc chắn nó sẽ không hoạt động.

---

EDIT

Có một tùy chọn mà làm việc trong cả Firefox và IE. Tất cả những gì bạn phải làm là đặt chân trang trong một riêng biệt <div> và sửa nó ở cuối trang và sau đó sử dụng lặp lại <tfoot> làm dấu cách. Cách tiếp cận này có một số hạn chế nhỏ, mặc dù (chi tiết bên dưới đoạn trích).

Đây là mã. Để xem nó hoạt động trong Firefox, hãy mở this jsfiddle, nhấp chuột phải vào đầu ra, chọn Khung này> Chỉ hiển thị Khung này và thực hiện xem trước bản in. Trong IE, nhấp vào khung đầu ra, nhấn CTRL + A, thực hiện xem trước bản in và thay đổi "Như đã đặt ra trên màn hình" thành "Như đã chọn trên màn hình".

@media print { 
 
    #spacer {height: 2em;} /* height of footer + a little extra */ 
 
    #footer { 
 
    position: fixed; 
 
    bottom: 0; 
 
    } 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <th>PAGE HEADER</th> 
 
    </tr> 
 
    <thead> 
 
    <tfoot> 
 
    <tr> 
 
     <td id="spacer"></td> 
 
    </tr> 
 
    </tfoot> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<div id="footer"> 
 
    PAGE FOOTER 
 
</div>

Hạn chế chính của phương pháp này là nó đặt một chân giống hệt nhau trên mỗi trang trong công việc in ấn, có nghĩa là bạn không thể có bất kỳ trang cùng với một chân khác nhau, hoặc không chân trang. Ngoài ra, kể từ khi chiều cao của spacer phụ thuộc vào chiều cao của footer, bạn sẽ phải điều chỉnh nó nếu chiều cao footer thay đổi.

Answer 2

Đây là một câu hỏi thú vị, không bao giờ gặp phải/cần thiết này, vì vậy tôi đã học những điều mới mẻ quá. Nhưng đây là giải pháp của tôi làm việc trong ngắn hạn (bạn đã thực sự khá gần):

Với #wrapper { position: relative }, các #header, #footer và #content{ position: absolute } và bổ sung vị trí và chiều cao quy tắc CSS của bạn (HTML không thay đổi) bạn hoàn toàn kiểm soát bố cục. Mã của bạn có thể trông giống như thế này:

Snippet dưới đây, jsFiddle: fiddle và fiddle output frame

html,body { height: 100%; width: 100%; overflow: hidden } 
 

 
#wrapper { 
 
    position: relative; 
 
    height: 95%; width: 100%; 
 
} 
 
#wrapper #header { 
 
    position: absolute; 
 
    top: 0; 
 
    height: 100px; 
 
} 
 
#wrapper #content { 
 
    position: absolute; 
 
    top: 100px; 
 
} 
 
#wrapper #footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
} 
 

 
@media print { 
 
    h1 { 
 
     page-break-before: always; 
 
    } 
 

 
    @page { 
 
     size: A4; 
 
     margin: 0; 
 
    } 
 
}

<table id="wrapper"> 
 
    <thead> 
 
    <tr> 
 
     <td id="header">HEADER TEXT</td> 
 
    </tr> 
 
    </thead> 
 

 
    <tfoot> 
 
    <tr> 
 
     <td colspan="0" id="footer"> 
 
      <img src="https://unsplash.it/200?image=031" /> 
 
     </td> 
 
    </tr> 
 
    </tfoot> 
 

 
    <tbody> 
 
    <tr> 
 
     <td id="content"> 
 
      Welcome 
 
      <h1>NEXT PAGE</h1> 
 
      just one line 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
    
 
</table>

Answer 3

Hi Tôi chỉ cần thêm các truy vấn phương tiện truyền thông sau để CSS của bạn. Và nó TRÌNH

@media print { 
#footer { 
    position: absolute; 
    bottom: 0; 
    } 
} 

Kiểm tra fiddle sau

https://jsfiddle.net/jjsqgaza/