Làm thế nào để phần chân trang của trang ("footer") dính vào đường viền dưới cùng của cửa sổ - đây có lẽ là vấn đề phổ biến nhất trong việc bố trí các trang của trang web. Tất nhiên, có các giải pháp, và có một số giải pháp trong số đó. Dưới đây là một cách để đảm bảo rằng chân trang luôn được nhấn xuống cuối trang, bất kể số lượng nội dung và loại trình duyệt.
Nó là cần thiết
Kiến thức cơ bản về CSS và HTML
Hướng dẫn
Bước 1
Hãy lấy một trong những sơ đồ phân trang điển hình hơn làm ví dụ - nó sẽ có gác mái (đầu trang), khối chính và chân trang. Tất nhiên, nếu cần, bạn có thể đặt một số cột trong khối chính, nhưng chúng tôi sẽ không làm điều này ở đây, chúng tôi sẽ chỉ tập trung vào việc không định vị chân trang. Mã HTML của trang sẽ bắt đầu bằng việc khai báo đặc điểm kỹ thuật:
Giữa các thẻ và, ngoài tiêu đề trang, chúng tôi sẽ đặt dấu hiệu mã hóa: Cũng như liên kết đến tệp CSS bên ngoài chứa mô tả về kiểu: @import "styles.css"; Chúng tôi sẽ không đặt mô tả các kiểu trực tiếp vào mã html của trang để tránh phức tạp với trình duyệt Opera của phiên bản thứ 9. Giữa các thẻ và đặt cấu trúc khối của trang. Đầu tiên, tất nhiên, là khối tiêu đề. Chúng tôi sẽ cung cấp cho nó mã định danh tiêu đề để có thể đặt kiểu cho khối cụ thể này:
Tiêu đề này luôn ở đầu cửa sổ.
Sau đó - khối chính của trang. Nó sẽ bao gồm hai cái lồng nhau - bên ngoài (số nhận dạng - bên ngoài) và bên trong (số nhận dạng - bên ngoài):
Đây là phần chính.
Và cuối cùng, phần footer:
Đó là footer - luôn ở cuối cửa sổ!
Trang hoàn chỉnh sẽ trông như thế này:
Cách nhấn xuống chân trang
@import "styles.css";
Tiêu đề này luôn ở đầu cửa sổ.
Đây là phần chính.
Đó là footer - luôn ở cuối cửa sổ!
Bước 2
Bây giờ chúng ta hãy chuyển sang nội dung của biểu định kiểu. Nó thực hiện sơ đồ sau: khối trang chính sẽ được đặt thành 100% chiều cao, tiêu đề sẽ được đặt ở vị trí tuyệt đối và phần chân trang sẽ tương đối. Để ngăn đầu đề chồng lên nội dung chính của trang, nội dung chính này được đặt trong một hộp bổ sung bên trong hộp chính và hộp bổ sung này được đặt ở lề trên bằng chiều cao của hộp đề mục. Và chân trang có lề trên âm bằng với chiều cao của nó - theo cách này, nó sẽ được nâng lên trên mép dưới của cửa sổ với chiều cao đầy đủ. Nội dung đầy đủ của tệp css: * {margin: 0; đệm: 0}
html, body {height: 100%;} body {
màu đen;
chức vụ: thân nhân;
}
#outer {
chiều cao tối thiểu: 100%;
lề: 0;
nền: trắng;
màu đen;
} * html #outer {height: 100%;}
#header {
vị trí: tuyệt đối;
đầu: 0;
trái: 0;
chiều rộng: 100%;
chiều cao: 70px;
nền: # 304a00;
tràn: ẩn;
màu trắng;
text-align: center;
} #footer {
chức vụ: thân nhân;
margin-top: -50px;
rõ ràng: cả hai;
chiều rộng: 100%;
chiều cao: 50px;
màu nền: # 304a00;
màu trắng;
text-align: center;
}
.outerwrap {
float: trái;
chiều rộng: 100%;
padding-top: 71px;
} Tệp này phải được lưu với tên mà chúng tôi đã chỉ định trong mã html của trang - styles.css.
