Làm cho chiều cao chân trang mở rộng đến cuối trang

Question

Tôi có một trang web rất đơn giản có vấn đề. Nó ahs 3 divs ngồi ontop của nhau, tiêu đề, nội dung sau đó footer.

Tôi muốn chiều cao chân trang của tôi mở rộng đến cuối trang. Tôi có thể làm cái này như thế nào?

Tiêu đề có chiều cao không đổi, nội dung sẽ thay đổi về chiều cao tùy thuộc vào nội dung nhận được từ cuộc gọi AJAX. Vì vậy, tôi không thể đặt nó một cách rõ ràng.

Heres JSFiddle tôi: http://jsfiddle.net/5U6ZB/2/embedded/result/

<div id="header"></div> 
<div id="content"> 
    <!-- height is dynamic sometimes it will be full of divs that makes it 
     longer than the screen height other times it only has 1 div --> 
</div> 
<div id="footer"> 
    <!-- How do I make the footer height fill up the rest of the page height? --> 
</div> 

body { background-color: white; } 
div { width: 100%; } 

#header { 
    height: 400px; 
    background-color: RGB(200,200,200); 
} 

#content { 

} 

#footer { 
    background-color: RGB(112,112,112); 
    /*How do I make the footer height fill up the rest of the page height?*/ 
} 

Answer 1

Âm thanh như các giải pháp đơn giản nhất trong trường hợp của bạn sẽ được để làm cho body background màu sắc giống như chân và làm cho nội dung của bạn màu trắng. Điều này sẽ tạo ra ảo tưởng về chân trang đi xuống tận đáy.

body { background-color:RGB(112,112,112); } 
div { width: 100%; } /* Divs are block elements which automatically take 100% width so this is redundant. */ 

#header { 
    height: 400px; 
    background-color: RGB(200,200,200); 
} 

#content { 
    background-color:white; 
} 

#footer { 
    background-color: RGB(112,112,112); 

} 

Answer 2

Trong CSS tinh khiết, đó là không thể, nhưng nếu bạn muốn sử dụng một số ưa thích Javascript, bạn có thể tự động thay đổi chiều cao của chân căng chiều cao còn lại, giả sử các nội dung không đã làm điều đó cho bạn.

var header = document.getElementById("header"), 
    content = document.getElementById("content"), 
    footer = document.getElementById("footer"), 
    height = window.screen.height - header.clientHeight - content.clientHeight; 

footer.clientHeight = (height < 150) ? 150 : height; // Sets a minimum height of 150px 

Mặc dù vậy, tốt hơn là nên tuân theo đề xuất của SynXsiS vì nó có xu hướng mang lại một ngoại hình đẹp hơn. Cuối cùng, nó thực sự phụ thuộc vào cách bạn thiết kế giao diện của trang của bạn.

Answer 3

html { 
background-color:#093; /*the footer color*/ 
} 

body { 

background-color: #f6f; /*the body color*/ 
} 

Answer 4

Cách tiếp cận tương tự với fayerth, điều này sẽ điều chỉnh chiều cao khi trình duyệt được thay đổi kích thước (và dựa trên jQuery).

Thay vì thay đổi kích thước chân trang trực tiếp, tôi đã thêm phần tử trống bổ sung <div class="flex-footer"> và thay đổi kích thước thay vào đó. Suy nghĩ của tôi là nó sẽ tạo ra một hiệu ứng hốt hoảng hơn nếu chân trang chứa một loạt các phần tử cũng như không gây phiền phức với bất kỳ con nào của chân trang có kích thước tương đối so với bố mẹ.

CSS của bạn sau đó sẽ áp dụng bất kỳ màu nền nào cần thiết.

Lưu ý nhận xét của tôi về lợi nhuận tiêu cực. Điều này là cần thiết trong trường hợp của tôi kể từ khi thiết kế yêu cầu sử dụng lợi nhuận tiêu cực. Tôi đã bao gồm bit đó trong trường hợp của bạn là tốt.

$(function(){ 
     $(window).load(resizeFooter); 
     $(window).resize(resizeFooter); 
    }); 
    // Dynamically resize footer to fill page, IE8 doesn't like this. 
    function resizeFooter() { 
     var windowHeight = window.innerHeight; 
     var headerHeight = $("header").height(); 
     var contentHeight = $("div.main").height(); 
     var footerHeight = $("footer").height(); 
     // 107 references a negative margin in header - you'll need to account for this if necessary 
     var flexFooter = windowHeight - (headerHeight + contentHeight + footerHeight - 107); 
     $(".flex-footer").css("min-height", flexFooter); 
    } 

Answer 5

rất đơn giản, và làm việc cho tôi :)

chân {position: absolute; chiều rộng: 100%; trên cùng: (đọc bên dưới); }

bạn có thể thử với các giá trị phần trăm khác nhau trong bất động sản hàng đầu, khi chân chiếm chỗ mong muốn trong màn hình của bạn, mà phần trăm sẽ áp dụng cho tất cả các độ phân giải :)

Answer 6

:root { 
    background-color: siteBackgroundColor; 
} 

body { 
    background-color: footerColor; 
} 

này không thực sự mở rộng chân trang, nhưng mở rộng màu nền của nó một cách trực quan.

Answer 7

Tôi đang tinh chỉnh một chủ đề wordpress - và có cùng một vấn đề. Nhưng - nếu tôi thực hiện một chân trang dính, nó thực sự một phần cuộn đi với nội dung.Wordpress là một mớ hỗn độn vì vậy tôi không chắc chắn lý do tại sao nó làm điều này - nhưng những gì tôi cần là để cho footer ngồi bên dưới nội dung chính, nhưng THEN điền phần còn lại của màn hình để nó không ngớ ngẩn trên các trang ngắn hơn.

Bất kỳ ý tưởng nào về cách sửa CSS dễ dàng khác với mẹo màu? (mà tôi có thể làm;)

Claudia