Tôi đang cố gắng tìm một giải pháp đơn giản cho cách bố trí này. Đây là html đơn giản hóa.
Đầu trang và chân trang có chiều cao pixel cố định. Phần giữa có thể có chiều cao thay đổi, tùy thuộc vào nội dung. Tôi muốn chiều cao tối thiểu của trình bao bọc là 100%. Vì vậy, nếu văn bản ở giữa nhỏ thì div ở giữa sẽ mở rộng để lấp đầy trang trình duyệt. Nếu quá dài,toàn bộ trangNên có thể cuộn được.
Có dễ không? Có lẽ thay đổi một cái gì đó trong cách bố trí?
Đây là giải pháp của bạn:http://jsfiddle.net/S4akv/1/
bạn không muốn .ở giữa
Đặt chiều cao cứng. Nếu nội dung của bạn chỉ có một vài dòng, bạn sẽ có thanh cuộn ở những nơi bạn không cần đến.
Với đầu trang và chân trang, bạn cũng không muốn có .ở giữa
类中使用 height: 100%
, vì nó sẽ đẩy chân trang của bạn xuống, buộc thanh cuộn không hiển thị. BạnMà cònkhông muốn một sự rõ ràngchiều cao:100%
, bởi vì hầu hết các trình duyệt sẽ hiểu nó là 100% chiều cao của trình duyệt, vì vậy khi bạn đổi kích thước trình duyệt thành lớn hơn, chiều cao sẽ không thay đổi hoặc chân trang sẽ không di chuyển.
Giải pháp tốt nhất ở đây là đính kèm trình bao bọc của bạn và mọi nền liên quan vào trình bao bọc đó. Theo ý kiến của bạn .ở giữa
nội dung trong div, câu trả lời này có thể thay đổi, nhưng với các thông số đơn giản thì đây là cách tiếp cận tao nhã nhất.
Bí quyết là đảm bảo tất cả các phần tử được chứa đều có chiều cao được đặt. Lý do là bất kỳ height: 100%
Phần tử khối sẽ chỉ chiếm 100% diện tích chứa nó. Trong trường hợp này, bạn cần cung cấp phần giữa, phần bao bọc và nội dung, html
Đặt chiều cao
body,html { chiều cao: 100%; lề: 0; phần đệm: }
.wrapper { chiều cao tối thiểu: 100%; chiều rộng: 100%; màu nền: đỏ; vị trí: tương đối; phần đệm dưới cùng: 200px
.header { chiều cao: 200px; chiều rộng: 100%; màu nền: xanh }
.ở giữa { }
.footer { chiều cao: 200px; chiều rộng: 100%; màu nền: xanh lục;
如果您在 .ở giữa
Nếu bạn có nội dung lồng nhau và cũng cần chiều cao 100% thì có một cách tốt hơn đó là sử dụng kết hợp chiều cao, định vị tuyệt đối và lề âm. Có hàng triệu cách để lột da mèo. Vâng, ít nhất là một vài :)
Chỉnh sửa thành .wrapper
Thêm phần đệm để nhường chỗ cho phần chân trang. Phần đệm dưới cùng của trình bao bọc phải có cùng chiều cao với phần chân trang
Tôi là một lập trình viên xuất sắc, rất giỏi!