Làm thế nào để giữ footer của bạn ở nơi nó thuộc về?

Bài đăng này cũng có sẵn bằng tiếng Hàn .

Chân trang là phần tử cuối cùng trên trang. Tối thiểu nó nằm ở dưới cùng của chế độ xem hoặc thấp hơn nếu nội dung trang cao hơn chế độ xem. Đơn giản, phải không? ?

Khi làm việc với nội dung động bao gồm chân trang, đôi khi xảy ra sự cố khi nội dung trên một trang không đủ để lấp đầy nó. Chân trang, thay vì ở cuối trang mà chúng ta muốn nó ở lại, sẽ tăng lên và để lại một khoảng trống bên dưới nó.

Để khắc phục nhanh, bạn hoàn toàn có thể định vị chân trang ở cuối trang. Nhưng điều này đi kèm với mặt trái của nó. Nếu nội dung phát triển lớn hơn chế độ xem, phần chân trang sẽ vẫn 'bị kẹt' ở cuối chế độ xem, cho dù chúng ta có muốn hay không.

Điều này cho thấy hành vi mà chúng tôi không muốn và muốn:

Hãy xem xét một cách tiếp cận để đạt được điều này.

Kiểm soát chân trang của bạn

index.html:

main.css:

#page-container { position: relative; min-height: 100vh; } #content-wrap { padding-bottom: 2.5rem; /* Footer height */ } #footer { position: absolute; bottom: 0; width: 100%; height: 2.5rem; /* Footer height */ }

Vậy điều này đang làm gì?

  • page-containerđi xung quanh mọi thứ trên trang và đặt chiều cao tối thiểu của nó thành 100% chiều cao khung nhìn ( vh). Như vậy relative, các phần tử con của nó có thể được đặt với absolutevị trí dựa trên nó sau này.
  • content-wrapmột phần đệm dưới cùng là chiều cao của chân trang, đảm bảo rằng có đủ không gian chính xác còn lại cho chân trang bên trong vùng chứa chúng đều ở trong đó. Một gói divđược sử dụng ở đây sẽ chứa tất cả nội dung trang khác.
  • Cái footerđược đặt thành absolute, dính vào cái bottom: 0của page-containernó bên trong. Điều này rất quan trọng, vì nó không ảnh absolutehưởng đến khung nhìn, nhưng sẽ di chuyển xuống nếu cửa sổ page-containercao hơn khung nhìn. Như đã nêu, chiều cao của nó, được đặt tùy ý 2.5remở đây, được sử dụng ở content-wraptrên nó.

Và bạn có nó rồi đấy! Chân trang của bạn bây giờ vẫn ở nơi bạn mong đợi!

Lần chỉnh sửa cuối cùng

Tất nhiên, đây là CSS, vì vậy nó sẽ không hoàn chỉnh nếu không có một số cân nhắc về UX dành riêng cho thiết bị di động và một cách tiếp cận thay thế bằng cách sử dụng min-height: 100%thay vì 100vh. Nhưng điều này có nhược điểm riêng của nó.

Flexbox (với flex-grow) hoặc Grid cũng có thể được sử dụng và cả hai đều rất mạnh mẽ.

Bạn chọn phương pháp nào hoàn toàn phụ thuộc vào bạn và các chi tiết cụ thể trong thiết kế của bạn. Hy vọng rằng, ví dụ trên và các liên kết giúp bạn tiết kiệm thời gian trong việc đưa ra quyết định và thực hiện nó.

Cảm ơn vì đã đọc. Đây là một số điều khác mà tôi đã viết gần đây:

  • Hướng dẫn cho người mới bắt đầu về Dịch vụ thùng chứa đàn hồi của Amazon
  • Thử nghiệm React với Jest và Enzyme