Khi chúng ta thiết kế layout của trang Web dạng bảng (table) thì việc đưa phần footer lúc nào cũng ở phía dưới là một việc hết sức đơn giản. Nhưng khi bạn làm việc với layout dạng <div> thì việc đưa phần footer lúc nào cũng ở phía dưới là một điều rất khó khăn. Mặc dù như vậy các Designer CSS vẫn nghĩ ra được các thủ thuật (trick) để thực hiện việc đó.
Sau đây chúng ta sẽ đi chi tiết về thủ thuật này:
Trước khi đi vào chi tiết để có một hình dung cụ thể chúng ta cùng xem ví dụ minh họa sau. Ý tưởng chủ đạo của kỹ thuật này là chúng ta sẽ dùng một thẻ <div> có chiều cao là 100% để đẩy phần footer xuống phía dưới, khi đó thì phần footer sẽ bị đẩy ra ngoài phạm vi của trang và không thể nhìn thấy được.
Để có thể nhìn thấy được phần footer chúng ta sẽ đặt thuộc tính margin-bottom của phần wrapper bằng âm với mục đích là giảm chiều cao của phần wrapper một khoảng đúng bằng chiều cao của phần footer. Từ đó chúng ta có thể hoàn toàn nhìn thấy phần footer.
Dựa trên ý tưởng như vậy chúng ta có định dạng HTML như sau: /* BEGIN: WRAPPER */ <div class="wrapper"> <div class="header"> <h1>CSS Sticky Footer</h1> </div> <div class="content"> Nội dung content... </div> <div class="push"></div> </div> /* END: WRAPPER */ /* BEGIN: FOOTER */ <div class="footer">
<p>Nội dung footer...</p> </div>
/* END: FOOTER*/
Để cho phần wrapper có chiều cao 100% chúng ta định dạng các thuộc tính CSS của nó như sau:
.wrapper { ...
min-height: 100%; /* Fix cho firefox */ height: auto !important;
height: 100%; ...
}
Khi đó phần footer sẽ bị đẩy ra ngoài trang, để cho nó có thể nhìn thấy được ta cần phải đặt
margin-bottom của phần wrapper bằng âm.
.wrapper { ...
margin: 0 auto -4em; ...
}
Phần margin âm này phải có chiều cao đúng bằng chiều cao của phần footer. Khi đó phần footer sẽ được hiển thị hoàn toàn.