Altezza del piè di pagina estendere fino alla fine della pagina

Question

Ho una pagina Web molto semplice con un problema. Ci sono 3 div che si siedono uno sopra l'altro, l'intestazione, il contenuto e poi il piè di pagina.

Desidero che l'altezza dei miei fondatori si espanda nella parte inferiore della pagina. Come posso fare questo?

L'intestazione ha un'altezza costante, il contenuto varia in altezza a seconda del contenuto ricevuto da una chiamata AJAX. Quindi non posso impostarlo esplicitamente.

Heres mia JSFiddle: 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

suona come la soluzione più semplice nel tuo caso sarebbe quello di rendere il corpo di sfondo dello stesso colore come il piè di pagina e rendere il vostro contenuto di bianco. Ciò darebbe l'illusione del footer che arriva fino in fondo.

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

In CSS puro, non è possibile, ma se si vuole usare un po 'di fantasia JavaScript, è possibile cambiare dinamicamente l'altezza del piè di pagina per allungare l'altezza residua, supponendo che il contenuto non sia già farlo per tu.

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 

Di solito è meglio seguire il suggerimento di SynXsiS anche se, come si tende a dare un aspetto più bello. Alla fine, dipende molto dal modo in cui disegni l'aspetto della tua pagina.

Answer 3

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

body { 

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

Answer 4

Un approccio simile a fayerth, questo sarà regolare l'altezza dinamicamente quando viene ridimensionato il browser (ed è basato su jQuery).

Invece di ridimensionare direttamente il piè di pagina, ho aggiunto l'elemento vuoto aggiuntivo e ridimensionato quello. Il mio pensiero è che dovrebbe dare un effetto meno nervoso se il footer contiene un mucchio di elementi e non si agitano con i figli del footer che sono dimensionati rispetto al genitore.

Il tuo CSS dovrebbe quindi applicare qualsiasi colore di sfondo necessario.

Nota il mio commento sui margini negativi. Ciò era necessario nel mio caso poiché il progetto richiedeva l'uso di margini negativi. Ho incluso quel pezzettino nel caso lo faccia anche il tuo.

$(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

molto semplice, e funziona per me :)

footer {position: absolute; width: 100%; sopra: (leggi sotto); }

si può provare con i valori percentuali di diferent di proprietà top, quando il piè di prendere il posto desiderato nel vostro schermo, che per cento si applicherà a tutte le risoluzioni :)

Answer 6

:root { 
    background-color: siteBackgroundColor; 
} 

body { 
    background-color: footerColor; 
} 

Questo in realtà non espandi il piè di pagina, ma espande visivamente il suo colore di sfondo.

Answer 7

Sto modificando un tema di wordpress e ho lo stesso problema. Ma se implemento un footer appiccicoso, in realtà scorre parzialmente via con il contenuto.Wordpress è un casino, quindi non sono sicuro del motivo per cui lo sta facendo, ma quello di cui ho bisogno è lasciare che il footer si sieda sotto il contenuto principale, ma poi riempire il resto dello schermo in modo che non sembri ridicolo sulle pagine più corte.

Qualsiasi idea di una semplice correzione CSS diversa da quella del colore? (Che io possa fare;)

Claudia