Đang chuẩn bị nút TẢI XUỐNG, xin hãy chờ
Tải xuống
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 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ụ. | Kỹ thuật đưa footer xuông cuôi trang 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 view source print 01. BEGIN WRAPPER 02. div class wrapper 03. 04. div class header 05. h1 CSS Sticky Footer h1 06. div 07. 08. div class content 09. Nội dung content. 10. div 11. 12. div class push div 13. div 14. END WRAPPER 15. 16. BEGIN FOOTER 17. div class footer 18. p Nội dung footer. p 19. div 20. 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 view source print 1.wrapper 2. . 3. min-height 100 Fix cho firefox 4. height auto important 5. height 100 6. . 7. 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. view source print 1.wrapper
