4 cách cố định footer ở cuối trang web trong CSS<span class="wtr-time-wrap after-title"><span class="wtr-time-number">6</span>  phút đọc</span>

4 cách cố định footer ở cuối trang web trong CSS6 phút đọc

Mọi website đều có phần footer hay còn gọi là chân trang.Đây là nơi hiển thị thông tin như Copyright hay link nội bộ website.Trong nhiều trường hợp phần nội dung chính thường nhiều hơn so với phần chân trang và phải cuộn trang để thấy được phần footer.

Tuy nhiên nếu như phần nội dung chính quá ngắn không đủ phủ hết chiều cao màn hình thì phần chân trang sẽ tự động nhảy lên sát phần nội dung phía trên và để trống phần trắng phía dưới trông rất thiếu tự nhiên.

Để khắc phục vấn đề này bạn có thể tham khảo 4 cách cố định footer ở cuối trang web trong CSS dưới đây.

Sử dụng [table-row]

Cách sử dụng table-row được sử dụng từ cách đây rất lâu và hiện nay nó đã không còn phổ biến nữa.Nhưng mình vẫn giới thiệu đến các bạn vì nếu bạn có làm việc với webiste nào cũ mà gặp cách cố định footer ở cuối trang web trong CSS này thì cũng sẽ hiểu được.

HTML

Về code HTML thì rất đơn giản chỉ bao gồm hai phần đó là phần nội dung chính trong thẻ div có class là main và phần nội của chân trang trong thẻ div có class là footer.Code HTML sẽ giống nhau cho cả 4 cách trong bài viết này.

Đoạn code CSS dưới đây đã được mình thêm vào các thuộc tính như background, text-align, color để khi bạn có copy code thực hành cũng sẽ dễ dàng hình dung kết quả hơn.

CSS

Ở ví dụ này để cho chiều cao của trình duyệt luôn full màn hình thì mình đã thiết lập chiều cao tối đa cho hai thành phần htmlbodyheight: 100%;

Tiếp theo mình thêm thuộc tính display: table; cho thẻ body, lúc này toàn bộ phần body sẽ đóng vai trò như một bảng.

Giờ trong phần nội dung chính main mình thêm thuộc tính display: table-row; để biến toàn bộ phần main này thành một ô trong bảng.Cuối cùng trong phần main mình thiết lập chiều cao 100% cho nó là xong.

Bạn có biết trong table thì dù chiều rộng và chiều cao của hàng hay cột có vượt quá chiều cao, chiều rộng của table đi chăng nữa thì cũng không bị tràn ra ngoài.

Đó là nguyên lý hoạt động của cách này.Hơi khó hiểu nhưng nếu bạn thấy khó quá thì có thể áp dụng luôn code dưới đây mà khỏi phải suy nghĩ cách nó hoạt động như thế nào cũng được.

Code ứng dụng

Sử dụng Flexbox

So với cách sử dụng table-row ở trên thì cách sử dụng Flexbox để cố định footer ở cuối trang web trong CSS đơn giản và dễ hiểu hơn nhiều.

CSS

Để htmlbody mở full chiều cao trình duyệt thì mình đã thiết lập chiều cao cho chúng là 100%.

Trong phần body mình đã thêm thuộc tính display: flex; để có thể sử dụng được những tính chất của flexbox.Đồng thời mình cũng thêm thuộc tính flex-direction: column; để toàn bộ yếu tố bên trong thẻ body sẽ sắp xếp theo chiều dọc từ trên xuống dưới.

Ở thành phần main mình thêm thuộc tính flex: 1 0 auto;.Với cách viết này mình sẽ có thuộc tính flex-grow mang giá trị là 1 nghĩa là nó sẽ luôn chiếm hết lấy phần trống còn thừa của khối.

Giá trị 0 ở đây là của thuộc tính flex-shrink, với giá trị này thì dù nội dung bên trong main có vượt quá chiều rộng màn hình thì nó cũng không tự động co lại cho vừa màn hình.

Cách viết flex: 1 0 auto; tương đương với đoạn code dưới đây :

Trong thành phần footer, để nó không bị co lại và mất đi chiều cao mong muốn mình thêm vào cho nó thuộc tính flex-shrink: 0;.Như vậy là hoàn thành.

Nếu bạn chưa hiểu rõ về Flexbox thì hãy tham khảo bài viết sau đây để biết thêm chi tiết nhé.

Sử dụng Grid

Ngoài cách sử dụng Flexbox thì chúng ta cũng có một cách nữa rất hay đó là sử dụng Grid để cố định footer ở cuối trang web trong CSS.

CSS

Với cách này mình vẫn thiết lập chiều cao cho htmlbody100%  để chúng có chiều cao mở full chiều cao trình duyệt.Để áp dụng được những đặc tính của Grid mình cần khai báo thuộc tính display: grid; cho CSS của thẻ body.

Ngoài ra mình chỉ cần thêm thuộc tính grid-template-rows: 1fr auto; nữa là hoàn thành việc cố định footer ở cuối trang web trong CSS.

Bạn hãy copy code các ví dụ mà mình tạo ra ở từng cách rồi thử thực hành xem nhé.

Code ứng dụng

Sử dụng [Sticky]

Cách cuối cùng trong bài viết này và cũng là cách tối ưu nhất ở thời điểm hiện tại đó là sử dụng Sticky để cố định footer ở cuối trang web trong CSS.

CSS

Vẫn như ở các cách trên mình vẫn thêm thuộc tính chiều cao của hai thành phần htmlbody là 100%.Trong phần footer mình thêm thuộc tính position: sticky;top: 100%;.

Kết hợp hai thuộc tính này lại thì phần footer sẽ luôn được cố định ở vị trí cách top 100% hay nói cách khác là ở cuối trang web.Bạn thấy cách này so với những cách trên có đơn giản hơn không.

Kết luận

Cố định footer ở cuối trang web trong CSS là một trong những kĩ thuật khó mà không phải ai cũng biết.Trên đây mình đã giới thiệu với bạn tất cả 4 cách để thực hiện kĩ thuật này, hi vọng bạn sẽ áp dụng chúng trong dự án ở tương lai nếu có cơ hội.

Tùy theo các thành phần khác của website mà bạn hãy lựa chọn ra cách phù hợp nhất nhé.Nếu có gì chưa hiểu hay muốn góp ý tới mình thì hãy liên hệ với mình qua biểu mẫu liên hệ ở chân trang web này.

Nếu bạn thấy bài viết này hay và có ích thì bạn có thể ủng hộ blog của mình bằng một trong số những cách sau để mình có thêm động lực xuất bản nhiều bài viết mới chất lượng hơn nữa.

  • Chia sẻ bài viết này lên mạng xã hội qua các nút bên dưới đây.
  • Thả tim ở ngay cuối cùng bài viết này.
  • Đăng kí nhận thông báo bài viết mới bằng cách nhấn vào chuông đỏ góc dưới cùng bên trái.
  • Đánh giá chất lượng bài viết bằng sao ở trên cùng bài viết này.

Tìm kiếm bài viết trên blog với Google Search :

Bài viết có thể bạn sẽ thích

guest
0 Comments
Inline Feedbacks
View all comments
0
Hãy cùng thảo luận về bài viếtx
()
x