Tại sao chân của tôi ở giữa trang web của tôi?

Một chân trang web có thể xuất hiện ở giữa trang Web và không ở phía dưới vì một số lý do. Một trong những phổ biến nhất là nội dung trang web nhỏ và chân trang được đẩy lên giữa. Các thùng chứa "" với chân trang có thể được mã hóa không chính xác, lề hoặc phần đệm có thể sai và thuộc tính "float" có thể sai.

Vị trí chân trang

Thuộc tính "vị trí" CSS chân trang xác định vị trí chân trang trên trang Web liên quan đến các thành phần trang khác, như tiêu đề và nội dung chính. Năm loại định vị là vị trí tĩnh, vị trí cố định, vị trí tương đối, vị trí chồng chéo và vị trí tuyệt đối. Định vị tuyệt đối trong phần chân trang được sử dụng sao cho phần tử chân trang không hoạt động liên quan đến các phần tử khác. Thêm "vị trí: tuyệt đối;" mã hóa bên trong các thẻ "{footer" ngoặc "{" và "}". Ngoài ra, thêm "dưới cùng: 0;" trong dòng trực tiếp bên dưới mã "vị trí". Bây giờ chân trang được định vị tuyệt đối ở dưới cùng của trang web "DIV".

Chiều rộng và chiều cao chân trang

Các thuộc tính chiều rộng và chiều cao chân trang có thể can thiệp vào vị trí chân trang. Nếu chân trang quá lớn, thì nó chiếm quá nhiều không gian ở cuối trang Web. Trong thẻ ngoặc "#footer" của "{" và "}" được liệt kê "width: Xpx;" và "chiều cao: Xpx;" mã hóa. Thay đổi chiều rộng thành "100%" để làm cho phần chân trang rộng bằng phần còn lại của nội dung trang web. Thay đổi chiều cao thành kích thước pixel mong muốn, chẳng hạn như "60px" hoặc "75px." Hai thay đổi này có thể góp phần khiến phần chân trang bị đẩy xuống cuối trang Web.

Lề và đệm

Mã hóa lề và đệm có thể can thiệp vào vị trí chân trang. Khi lề chân trang quá hẹp hoặc phần đệm quá rộng, vị trí chân trang sẽ dịch chuyển và có thể di chuyển đến giữa trang Web. Một giải pháp dễ dàng là loại bỏ các lề và phần đệm hoàn toàn, sao cho các thuộc tính chân trang đó tương ứng với phần còn lại của mã hóa. Định vị thuộc tính "#footer" trong mã hóa trang Web. Trong các thẻ ngoặc của "{" và "}" là "lề: Xpx Xpx Xpx Xpx;" và "phần đệm: Xpx Xpx Xpx Xpx;" mã hóa. Bây giờ, phần chân trang và phần đệm được xác định bởi các thẻ "#body" và "#container" ở đầu trang Web. Xóa cả hai dòng mã hóa và làm mới trang Web.

Bố trí container

Chân trang web là một yếu tố được định vị trong bố cục bộ chứa DIV tổng thể. Khi thuộc tính bố trí vùng chứa không chính xác, nó có thể ảnh hưởng đến vị trí của footer trong trang Web. Bên trong các thẻ ngoặc "#container" của "{" và "}" có cùng thuộc tính "chiều cao" và "vị trí". Thay đổi "chiều cao" thành 100% và thay đổi "vị trí" thành tương đối. Thêm một dòng mã hóa mới vào "#container" và nhập "min-height: 100%;", giúp cho toàn bộ bố trí vùng chứa có chiều cao tối thiểu mới. Bây giờ toàn bộ trang Web sẽ giữ nguyên chiều cao của màn hình bất kể lượng nội dung. Vị trí tương đối cũng tương tác tích cực với vị trí tuyệt đối của chân trang.