Mách bạn những cách cố định footer ở cuối trang web trong CSS

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 website trong CSS dưới đây.

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

<html>

     <body>

          <div class=”main”>

             Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, facere? </div>

          <div class=”footer”>

             Web Design Ideas Copyright © 2020.

          </div>

      </body>

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

html {

  height: 100%;

}

body {

  display: table;

  width: 100%;

  height: 100%;

}

.main {

  display: table-row;

  height: 100%;

  background: #bdc3c7;

  text-align: center;

}

.footer {

  background: #2c3e50;

  text-align: center;

  color: #fff;

  padding: 1rem; }

Ở 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 html và body là height: 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

html {

    height: 100%;

}

body {

    height: 100%;

    display: grid;

    grid-template-rows: 1fr auto;

}

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

html {

  height: 100%;

}

body {

  min-height: 100%;

}

.main {

  background: #bdc3c7;

  text-align: center;

}

.footer {

  position: sticky;

  top: 100%;

  background: #2c3e50;

  text-align: center;

  color: #fff;

  padding: 1rem;

}

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 html và body là 100%.Trong phần footer mình thêm thuộc tính position: sticky; và 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.

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

html {

  height: 100%;

}

body {

  height: 100%;

  display: flex;

  flex-direction: column;

}

.main {

  flex: 1 0 auto;

  background: #bdc3c7;

  text-align: center;

}

.footer {

  background: #2c3e50;

  text-align: center;

  color: #fff;

  padding: 1rem;

  flex-shrink: 0;

}

Để html và body 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:

flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;

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.

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

html {
height: 100%;
}
body {
height: 100%;
display: grid;
grid-template-rows: 1fr auto;
}
.main {
background: #bdc3c7;
text-align: center;
}
.footer {
background: #2c3e50;
text-align: center;
color: #fff;
padding: 1rem;
}

Với cách này mình vẫn thiết lập chiều cao cho html và body là 100% để 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

html {

    height: 100%;

}

body {

    height: 100%;

    display: grid;

    grid-template-rows: 1fr auto;

}

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.

, ,

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *