Làm việc với cái chứa đổ
Bạn đã học về cái chứa đổ ở học phần sau:
https://giaiphapwebtl.vn/cac-dac-tinh-phuong-thuc-bo-cuc-trang-phan-8/
Vấn đề đối với footer trong Pandaisia home page là rằng không có phần tử gắn đuôi – footer
là phần tử cuối cùng trong page body. Một cách thức để sửa lỗi vấn đề đó là sử dụng after pseudo
– element để thêm một phần tử giữ chỗ sau footer.
Để giữ footer khỏi đổ:
1. Quay trở lại phần Footer Styles trong file pc_home.css và sau quy tắc style cho phần tử footer,
điền quy tắc style sau:
footer::after {
clear: both;
content: “”;
display: table;
}
2. Lưu thay đổi của bạn đối với style sheet và sau đó reload lại pc_home.html trong trình duyệt của
bạn. Ảnh dưới thể hiện bố cục hoàn chỉnh của Pandaisia Chocolates home page.
Chú ý rằng footer bây giờ có một nền dark brown vì nó đã mở rộng trong độ cao để chứa tất cả nội dung
được làm cho trôi của nó.
3. Đóng các tài liệu bạn đã mở cho phiên làm việc này.