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

• Quản trị Web
• Thủ thuật CSS
• Javascript
• ASP
• NET
• Tin học đại cương
• giáo trình Tin học đại cương
• bài giảng Tin học đại cương
• tài liệu Tin học đại cương
• lý thuyết Tin học đại cương
• Cơ bản về CSS
• Cách viết giản lược trong CSS
• Định dạng văn bản
• Kỹ thuật làm chữ hoa
• Cú pháp của CSS
• quản lý web
• xây dựng website
• Chèn CSS trong tài liệu HTML
• thủ thuật viết CSS
• Cách vi t gi n l c trong ế ả ượ CSS
• Tài liệu sử dụng CSS
• CSS tiếng Việt
• lập trình CSS
• mẹo lập trình
• kinh nghiệm lập trình
• ngôn ngữ lập trình
• thủ thuật lập trình
• thiết kế web
• CSS với bảng biểu
• trình soạn thảo CSS
• trình duyệt Web (Web browser)
• thủ thuật máy tính
• tạo menu với CSS
• tài liệu tin học
• phương pháp tạo menu
• chuyên đề CSS
• Mã CSS
• làm theme
• thủ thuật 360 plus
• mẹo tạo theme
• thủ thuật thiết kế
• Tối ưu hóa website
• đề thi
• trắc nghiệm môn css
• trắc nghiệm môn HTML
• lập trình
• kỹ thuật lập trình
• tài liệu lập trình
• lý thuyết lập trình
• công nghệ thông tin
• tin học
• quản trị mạng
• computer network
• giáo trình CSS
• thủ thuật cắt html
• photoshop căn bản
• đồ họa máy tính