"Chân trang" thường là khối dưới cùng của bố cục trang web. Khó khăn phổ biến nhất trong việc định vị chân trang này là làm cho nó luôn được đặt ở cuối cửa sổ, bất kể độ đầy của trang hoặc loại trình duyệt. Đã có khá nhiều giải pháp cho vấn đề kể từ thời điểm chuyển đổi lớn sang bố cục khối, và một trong số chúng được đưa ra dưới đây.
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 sơ đồ bố cục trang phổ biến nhất làm cơ sở - ba khối được đặt bên trên khối kia. Phần trên (đầu trang) phải luôn được căn với đường viền trên cùng của cửa sổ, phần dưới cùng (chân trang) - đến đường viền dưới cùng và phần chính (phần nội dung) phải luôn lấp đầy khoảng trống giữa chúng. Mã nguồn phải chứa liên kết đến đặc điểm kỹ thuật Chuyển tiếp XHTML 1.0 và mô tả kiểu phải được đặt trong tệp CSS bên ngoài (để tránh sự cố với Opera 9. XX). Mô tả HTML của cấu trúc phải được đặt trong tệp chính nội dung của trang. Tất nhiên, nó sẽ bắt đầu từ khối trên cùng, trong thẻ mà thuộc tính định danh có giá trị sẽ được đặt, ví dụ: divHead:
Khối tiêu đề.
Khối chính phải bao gồm một cặp khối lồng nhau. Cái bên ngoài sẽ được cung cấp số nhận dạng divOut và cái bên trong - divContent:
Nội dung chính.
Chân trang được đặt thành divFoot:
Cuối trang.
Bước 2
Mã HTML hoàn chỉnh của trang sẽ giống như sau:
Ba khối
@import "style.css";
Đây là một khối tiêu đề.
Nội dung chính.
Đây là chân trang của trang.
Bước 3
Mô tả kiểu thực hiện cơ chế bố cục sau: khối ở giữa (divOut) được đặt thành 100% chiều cao, khối trên cùng (divHead) sẽ có vị trí tuyệt đối và khối dưới cùng - tương đối. Trong khối nội dung chính (divContent), phải có một khoảng trống ở trên cùng bằng chiều cao của khối đề mục để nó không chồng lên nội dung chính của trang. Và khối dưới cùng (footer) nên có một lề âm ở trên cùng, bằng chiều cao của khối này. Thao tác này sẽ nâng nó lên trên đường viền dưới cùng của cửa sổ trình duyệt. Cơ chế này có thể được thực hiện bằng cách sử dụng tệp css với nội dung sau: * {margin: 0; đệm: 0}
html, body {height: 100%;} body {
chức vụ: thân nhân;
màu: # 000;
}
#divOut {
lề: 0;
chiều cao tối thiểu: 100%;
nền: #FFF;
màu: # 000;
}
* html #divOut {height: 100%;}
#divHead {
vị trí: tuyệt đối;
trái: 0;
đầu: 0;
chiều rộng: 100%;
chiều cao: 80px;
nền: # 2F5000;
tràn: ẩn;
text-align: center;
màu: #FFF;
} #divFoot {
chức vụ: thân nhân;
rõ ràng: cả hai;
margin-top: -60px;
chiều cao: 60px;
chiều rộng: 100%;
màu nền: # 2F5000;
text-align: center;
màu: #FFF;
}
.divContent {
chiều rộng: 100%;
float: trái;
padding-top: 81px;
} Tên bạn đã chỉ định cho biểu định kiểu trong mã HTML là style.css.
