Làm thế nào để kéo dài div để lấp đầy màn hình?

Tôi có một trang web mà tôi đang cố gắng xây dựng và tôi đã đánh trúng một chút điều khiến tôi phát điên. Về cơ bản, trên các trang không có đủ nội dung để lấp đầy khung nhìn, tôi muốn có div cuối cùng (chân trang của tôi) lấp đầy phần còn lại của khung nhìn, nhưng hiện tại nó đang bị cắt bỏ.Làm thế nào để kéo dài div để lấp đầy màn hình?

HTML của tôi trông như thế này:

<body> 
    <div id="header"> </div> 
    <div id="subNav"> </div> 
    <div id="content"> </div> 
    <div id="footer"> </div> 
</body>

tôi đã cố gắng sử dụng html, body, footer { height:100%; } nhưng điều đó sẽ tạo ra nhiều không gian nhiều hơn cần thiết, về cơ bản chiều dài màn hình đầy đủ nội dung trống ở chân.

Làm cách nào để đặt chân trang của mình chỉ để lấp đầy phần còn lại của màn hình mà không cần thêm thanh cuộn?

Xin cảm ơn trước, Một bộ mã hóa bị thất vọng.

Nguồn

2010-03-12 Conor

Tôi khá chắc chắn cách duy nhất để làm điều này là tính toán phần còn lại tuyệt đối.

tức là, với jQuery

$('#footer').height(($(window).height() - $('#header').height() - $('#subNav').height() - $('#content').height()) + "px");

Bạn sẽ muốn làm điều này trên cửa sổ thay đổi kích thước để cho phép một cửa sổ tự động thay đổi kích thước.

$(window).resize(function(){...});

Nguồn

2010-03-12 19:49:56

Đúng, không thể thực hiện tốt nếu không có javascript. – gingerbreadboy

Phương pháp có sử dụng vị trí trên cùng của nội dung có liên quan đến tài liệu hay không và sau đó tính toán độ chênh lệch với chiều cao tài liệu có thể làm sạch hơn một chút không? –

Nếu bạn không muốn đi con đường jQuery, phiên bản của người nghèo trong số này được đưa ra # content một min-height mà sẽ làm cho nó hoạt động trong hầu hết các màn hình, và/hoặc bằng cách cho rất nhiều chân của bạn padding ở phía dưới. Nó có thể kích hoạt một thanh cuộn trong một số trường hợp, vì bạn chỉ kiểm soát thời gian ngắn của trang.

(Hoặc bạn chỉ có thể chấp nhận nó như là một hạn chế của môi trường. Stack Overflow, ví dụ, chỉ có phao chân của mình trên khoảng trắng nếu trang quá ngắn.)

Nguồn

2010-03-12 20:05:56

Tôi biết điều này là 10 tháng cuối năm vì vậy bạn có thể đã tìm ra điều gì đó. Nhưng đây là một giải pháp mà tôi sử dụng.

(xin lỗi, vì lý do nào đó tôi không thể lấy mã để hoạt động ngay để hiển thị mã cho bạn.) Về cơ bản, quấn div được gọi là "vùng chứa" hoặc giống như vậy, xung quanh tất cả các div khác ngoại trừ chân trang. Chân trang div sẽ nằm ngay dưới div vùng chứa với tất cả những người khác bên trong vùng chứa.

Đặt màu nền cho kiểu cơ thể là thứ bạn muốn tô màu ở dưới cùng. Sau đó, màu nền của div container sẽ là màu nền cơ thể của bạn. Vì vậy, tất cả mọi thứ xuống chân sẽ là những gì bạn muốn màu nền được và sau đó màu nền cơ thể lấp đầy phần còn lại của trang.

Nguồn

2011-02-04 15:45:06 astonishedman

Làm thế nào để kéo dài div để lấp đầy màn hình?

Trả lời

Các vấn đề liên quan