379

Ho avuto la seguente pagina (deadlink:) http://www.workingstorage.com/Sample.htmche ha un piè di pagina che non riesco a far sedere nella parte inferiore della pagina.

Voglio il piè di pagina

attenersi alla parte inferiore della finestra quando la pagina è corta e lo schermo non è pieno, e
rimanere alla fine del documento e spostarsi verso il basso normalmente quando c'è più di una schermata di contenuto (anziché sovrapporre il contenuto).

Il CSS è ereditato e mi confonde; Non riesco a cambiarlo correttamente per mettere un'altezza minima sul contenuto o portare il piè di pagina in fondo.

css footer

— Caveatrob
fonte

16

È sorprendente che questo sia un problema così comune. Forse in CSS4 vedremo implementazioni di "make a nav bar" e "make a footer", dal momento che vengono tentate così frequentemente.

— Isomorfismi

1

Non ci sarà mai CSS4 (CSS3 crescerà). Sto pensando che questo verrà risolto con l'implementazione di flexbox.

— Marijke Luttekes,

1

Ottimo articolo su questo: css-tricks.com/couple-takes-sticky-footer

— Phil

expertuggestion.com/css-snippets/8

— Lalit Baghel,

345

Un metodo semplice è quello di rendere il corpo 100%della pagina, con una min-heightdi 100%troppo. Funziona bene se l'altezza del piè di pagina non cambia.

Dai al piè di pagina un margine superiore negativo:

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}

— Jon Winstanley
fonte

27

Funziona solo se conosci in anticipo l'altezza del tuo piè di pagina. A volte i piè di pagina hanno contenuti dinamici o la creazione di un framework. Qualche idea per piè di pagina ad altezza variabile?

— Costa,

@Costa controlla qui la mia risposta , per una soluzione che funziona con piè di pagina ad altezza variabile.

— Jose Rui Santos,

per i contenuti dinamici basta omettere l '"altezza" e il piè di pagina si adatterà al contenuto. Non testato in tutti i browser

— m47730

Ciò può richiedere box-sizing: border-box;al corpo [e al #container].

— konsolebox,

Sembra un sacco di trucchi strani, ci sono risposte sotto che sono semplici e non usano trucchi.

— Andrew Koster,

166

Ho sviluppato un metodo abbastanza semplice per attaccare il piè di pagina in basso, ma come metodi più comuni, dovrai modificarlo per adattarlo all'altezza del tuo piè di pagina.

VISUALIZZA DEMO

Metodo Flexbox:

html, body{ height:100%; margin:0; }
header{ height:50px; background:lightcyan; }
footer{ height:50px; background:PapayaWhip; }

/* Trick */
body{ 
  display:flex; 
  flex-direction:column; 
}

footer{
  margin-top:auto; 
}

<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>

Espandi frammento

Questo metodo di seguito usa un "trucco" posizionando uno ::afterpseudo-elemento sul body, e impostandolo per avere l' altezza esatta del piè di pagina, quindi occuperà lo stesso spazio del piè di pagina, quindi quando il piè di pagina èabsolute posizionato su di esso, sembrerebbe che il piè di pagina occupi davvero spazio ed elimini gli effetti negativi del suo posizionamento assoluto (ad esempio, andando oltre il contenuto del corpo)

`position:absolute` metodo: (non consente l'altezza del piè di pagina dinamico)

html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }
header{ height:50px; background:lightcyan; }
footer{ background:PapayaWhip; }

/* Trick: */
body {
  position: relative;
}

body::after {
  content: '';
  display: block;
  height: 50px; /* Set same as footer's height */
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
}

<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>

Espandi frammento

Metodo di layout della tabella:

html,body { height: 100%;  margin: 0; }

header {
  height: 50px;
  background: lightcyan;
}

footer {
  height: 50px;
  background: PapayaWhip;
}


/**** Trick: ****/
body {
  display: table;
  width: 100%; 
}

footer {
   display: table-row;
}

<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>

Espandi frammento

— vsync
fonte

Semplice ed elegante e, soprattutto, funziona. Altre soluzioni falliscono quando inizi ad aggiungere div con display: table display: table-row display:table-cell. Tuttavia ho scoperto che dovevo aggiungere body {margin-top: 0; padding-top: 0; margin-bottom: 0; padding-bottom: 0;}per evitare una barra di scorrimento. Potresti soddisfare questo problema regolando il body:after heightma sto specificando il mio in rem non px quindi diventa problematico.

— Steve Waring,

3

@SteveWaring - Grazie. Aggiornato questa risposta da quando era piuttosto vecchia. Ora sono a favore dell'utilizzo diflexbox

— vsync il

1

Il CSS sotto "markup comune di base" ha avuto un piccolo errore che lo ha impedito di funzionare (l'errore non era presente nella "DEMO" collegata, che è ok). Mi sono preso la libertà di ripararlo.

— sleske,

3

GRAZIE! La soluzione flexbox è in realtà semplice e non utilizza hack o strane dimensioni fisse o posizioni fisse.

— Andrew Koster,

1

Questa demo è l'unica che funziona! Fantastico, grazie!

— Drakinite,

51

Un approccio molto semplice che funziona perfettamente su più browser è questo:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

<div id="container">
   <div id="header">header</div>
   <div id="body">body</div>
   <div id="footer">footer</div>
</div>

Espandi frammento

— Tamás Pap
fonte

34

Ho usato questo per attaccare il mio piè di pagina sul fondo e ha funzionato per me:

HTML

<body>
    <div class="allButFooter">
        <!-- Your page's content goes here, including header, nav, aside, everything -->
    </div>
    <footer>
        <!-- Footer content -->
    </footer>
</body>

Questa è l'unica modifica che devi fare nell'HTML, aggiungila divalla "allButFooter"classe. L'ho fatto con tutte le pagine, quelle che erano così brevi, sapevo che il piè di pagina non si sarebbe attaccato al fondo, e anche le pagine abbastanza lunghe da sapere già che dovevo scorrere. L'ho fatto, quindi ho visto che funziona bene nel caso in cui il contenuto di una pagina sia dinamico.

CSS

.allButFooter {
    min-height: calc(100vh - 40px);
}

La "allButFooter"classe ha un min-heightvalore che dipende dall'altezza del viewport ( 100vhsignifica il 100% dell'altezza del viewport) e dall'altezza del footer, che già sapevo fosse40px .

È tutto ciò che ho fatto e ha funzionato perfettamente per me. Non l'ho provato in tutti i browser, solo Firefox, Chrome e Edge, e i risultati sono stati quelli che volevo. Il piè di pagina si attacca in basso e non è necessario pasticciare con z-index, position o altre proprietà. La posizione di ogni elemento nel mio documento era la posizione predefinita, non l'ho cambiata in assoluta o fissa o altro.

Lavorare con un design reattivo

Ecco qualcosa che vorrei chiarire. Questa soluzione, con lo stesso piè di pagina che era alto 40 px, non funzionava come mi aspettavo quando stavo lavorando in un design reattivo utilizzando Twitter-Bootstrap. Ho dovuto modificare il valore che stavo sottraendo nella funzione:

.allButFooter {
    min-height: calc(100vh - 95px); 
}

Questo è probabilmente perché Twitter-Bootstrapviene fornito con i suoi margini e le sue imbottiture, quindi è per questo che ho dovuto regolare quel valore.

Spero che questo sia di qualche utilità per voi ragazzi! Almeno, è una soluzione semplice da provare e non comporta modifiche sostanziali all'intero documento.

— N. Larrieux
fonte

Ho riscontrato problemi con ogni sorta di soluzione a questo problema. Questa soluzione funziona con la mia pagina che varia ciò che viene visualizzato nel corpo utilizzando display: noneGrazie. È anche bello e semplice.

— Steve Waring,

dopo molte ore di tentativi di soluzioni solo due hanno funzionato nl. position: fixed; bottom: 0e questo. Questa soluzione è la migliore perché il piè di pagina non si attacca al fondo, ma rimane alla fine della pagina scorrevole.

— Hmerman6006,

per costruire sulla tua risposta, puoi guardarla in un altro modo impostando il .footer {max-height: calc(100vh+40px); position: absolute}. Come funziona anche, dovresti solo conoscere le dimensioni del tuo corpo.

— Hmerman6006,

29

Da IE7 in poi puoi semplicemente usare

#footer {
    position:fixed;
    bottom:0;
}

Vedi caniuse per supporto.

— Liam
fonte

77

Non voglio il piè di pagina in fondo quando c'è contenuto oltre il piè di pagina. Voglio che il piè di pagina rimanga sul fondo quando non c'è abbastanza, e poi si espande verso il basso normalmente quando c'è più di uno schermo. Il footer appiccicoso ha risolto questo.

— Caveatrob,

@Caveatrob: mi sono preso la libertà di modificare queste importanti informazioni nella tua domanda, solo per evitare equivoci (per i futuri lettori, presumibilmente hai risolto questo nel frattempo :-)).

— sleske,

Questa soluzione è l'unica che stampa il piè di pagina su ogni pagina ed è così semplice! Ma non riesco a farlo funzionare perché il contenuto non si sovrappone al contenuto principale. Qualcuno ha una soluzione per questo?

— Hatzen

15

Una soluzione semplice che utilizzo, funziona da IE8 +

Dai altezza minima: 100% su HTML in modo che, se il contenuto è inferiore, la pagina fissa assume l'altezza della porta di visualizzazione completa e il piè di pagina si attacca nella parte inferiore della pagina. Quando il contenuto aumenta, il piè di pagina si sposta verso il basso con il contenuto e continua a rimanere in basso.

Demo di lavoro del violino JS: http://jsfiddle.net/3L3h64qo/2/

Css

html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

html

   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>

— sanjeev
fonte

bene .. ma basta aggiornare .pageContentWrapper {padding-bottom: 100px; / * altezza del piè di pagina * /}

— Subodh Sharma

Molte grazie. lavorando su Angular 7

— Carlos Torres,

Non voglio creare una barra di scorrimento non necessaria quando possibile.

— Константин Ван

14

Tuttavia, un'altra soluzione davvero semplice è questa:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    display: table;
}

footer {
    background-color: grey;
    display: table-row;
    height: 0;
}

jsFiddle

Il trucco è usare a display:tableper l'intero documento e display:table-rowconheight:0 per il piè di pagina.

Poiché il piè di pagina è l'unico figlio del corpo che ha un display come table-row, viene visualizzato nella parte inferiore della pagina.

— Jose Rui Santos
fonte

Adoro le tabelle CSS, ma creano problemi in fondo che sono piuttosto strani: stackoverflow.com/questions/24898115/…

— Costa

1

Questa soluzione non sembra funzionare completamente - Firefox ignora l'altezza del piè di pagina 0. Ho usato invece l'altezza 1px o addirittura l'1%. Edge, IE11, Chrome e Safari mobile sono contenti di 0.

— Kitet,

Adoro davvero questa soluzione. Ma quando costruisco il mio layout in questo modo, il calcolo del browser degli elementi figlio viene meno. Diciamo che vogliamo avere un contenitore nella parte superiore della pagina e deve height: 100%quindi essere effettivamente al 100% quando il rapporto di visualizzazione è 1/1 (quadrato). Quando la finestra diventa più ampia (orizzontale) l'altezza sarà superiore al 100% e se più stretta (ritratto) inferiore al 100%. Quindi l'altezza è proporzionale alla larghezza della finestra. Ho provato a risolverlo con un altro wrapper ma questo non ha funzionato. Qualcuno ha una soluzione o almeno un suggerimento ???

— Axel,

@Axel In questa versione ho aggiunto un div blu in cima con un'altezza del 100% che occupa tutta l'altezza (meno l'altezza del piè di pagina), indipendentemente dalla larghezza della finestra. Penso che potresti avere altri problemi con i CSS. Prova a creare una versione ridotta del problema in base al mio jsFiddle originale

— Jose Rui Santos,

@JoseRuiSantos Grazie mille per la tua risposta. Sembra essere un bug di FireFox. Vedi screenshot

— Axel,

8

Una soluzione flex molto semplice che non assume altezze fisse o cambia posizione degli elementi.

HTML

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

Supporto per il browser

Tutti i principali browser, tranne IE11 e precedenti.

Assicurati di utilizzare Autoprefixer per i prefissi appropriati.

Mostra snippet di codice

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
}

main {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

/////////////////////////////////////////////

body,
html {
    margin: 0;
    padding: 0;
}

header,
main,
footer {
  margin: 0;
  display: block;
}

header,
footer {
  min-height: 80px; 
}

header {
  background-color: #ccc;
}

main {
  background-color: #f4f4f4;
}

footer {
  background-color: orange;
}

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

Espandi frammento

— m.spyratos
fonte

ha funzionato come un fascino! anche per res più di 4k footer stick in basso

— Arpan Banerjee

7

Una cosa di cui diffidare sono i dispositivi mobili, poiché implementano l'idea del viewport in un modo "insolito":

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW25

Come tale, usando position: fixed; (come ho visto consigliato in altri luoghi) di solito non è la strada da percorrere. Certo, dipende dal comportamento esatto che stai cercando.

Quello che ho usato e che ha funzionato bene su desktop e dispositivi mobili è:

<body>
    <div id="footer"></div>
</body>

con

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
}

#footer {
    position: absolute;
    bottom: 0;
}

— Ben Jackson
fonte

6

Fai questo

<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>

Puoi anche leggere su Flex, è supportato da tutti i browser moderni

Aggiornamento : ho letto di flex e l'ho provato. Ha funzionato per me. Spero che faccia lo stesso per te. Ecco come ho implementato. Qui principale non è l'ID, è il div

body {
    margin: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    display: block;
    flex: 1 0 auto;
}

Qui puoi leggere di più su flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Tieni presente che non è supportato dalle versioni precedenti di IE.

— Aarth Tandel
fonte

1

Questa è la migliore risposta in pratica. L'uso flex-grow: 1per qualcosa sopra il piè di pagina manterrà il piè di pagina in fondo correttamente.

— iBug

5

Ho appena risposto come una domanda simile qui:

Posiziona il piè di pagina in fondo alla pagina con intestazione fissa

Sono abbastanza nuovo nello sviluppo web e so che è già stata data una risposta, ma questo è il modo più semplice che ho trovato per risolverlo e penso che sia in qualche modo diverso. Volevo qualcosa di flessibile perché il piè di pagina della mia app Web ha un'altezza dinamica, ho finito con FlexBox e un distanziatore.

Inizia impostando l'altezza per il tuo html e il tuo corpo

html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

Sto assumendo un columncomportamento per la nostra app, nel caso in cui sia necessario aggiungere un'intestazione, un eroe o qualsiasi contenuto allineato verticalmente.

Crea la classe spaziatore

.spacer {
    flex: 1; 
}

Quindi in seguito il tuo HTML potrebbe essere qualcosa di simile

<html>
  <body>
    <header> Header </header>
    Some content...
    <div class='spacer'></div>
    <footer> Footer </footer>
  </body>
</html>

Puoi giocarci qui https://codepen.io/anon/pen/xmGZQL

— Camo
fonte

5

Questo è noto come un piè di pagina appiccicoso. Una ricerca su Google fornisce molti risultati. Un CSS Sticky Footer è quello che ho usato con successo. Ma ce ne sono altri.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

Espandi frammento

Fonte per questo codice

— Paolo Bergantino
fonte

3

Il mio metodo jquery, questo mette il piè di pagina nella parte inferiore della pagina se il contenuto della pagina è inferiore all'altezza della finestra, o semplicemente mette il piè di pagina dopo il contenuto altrimenti:

Inoltre, mantenere il codice nel proprio contenitore prima che l'altro codice riduca il tempo necessario per riposizionare il piè di pagina.

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();

— Sam Jones
fonte

3

Ho esaminato questo problema. Ho visto un bel po 'di soluzioni e ognuna di esse aveva dei problemi, spesso coinvolgendo alcuni numeri magici.

Quindi, usando le migliori pratiche da varie fonti, ho trovato questa soluzione:

http://jsfiddle.net/vfSM3/248/

La cosa che volevo ottenere specificamente qui era far scorrere il contenuto principale tra il piè di pagina e l'intestazione all'interno dell'area verde.

ecco un semplice css:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
header {
    height: 4em;
    background-color: red;
    position: relative;
    z-index: 1;
}
.content {
    background: white;
    position: absolute;
    top: 5em;
    bottom: 5em;
    overflow: auto;
}
.contentinner {
}
.container {
    height: 100%;
    margin: -4em 0 -2em 0;
    background: green;
    position: relative;
    overflow: auto;
}
footer {
     height: 2em;
     position: relative;
     z-index: 1;
     background-color: yellow;
}

— husayt
fonte

3

Odio i siti progettati in questo modo. Perché vuoi limitare la quantità di testo che posso leggere contemporaneamente? Non ho bisogno di vedere sempre l'intestazione e il piè di pagina, so dove trovarli quando li voglio.

— Tarmil,

1

@Tarmil dai un'occhiata a numerics.info . Vedi ora quando potrebbe essere utile?

— Husayt,

3

Ecco come ho risolto lo stesso problema

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

<div class="demo">

  <h1>CSS “Always on the bottom” Footer</h1>

  <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>

  <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

  <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

  <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute; </code>.</p>
</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>

Espandi frammento

— Nemus
fonte

3

footer {
  margin-top:calc(5% + 60px);
}

Funziona benissimo

— Karthikaeyan
fonte

2

Basta personalizzare la sezione piè di pagina

.footer 
{
   position: fixed;
   bottom: 0;
   width: 100%;
   padding: 1rem;
   text-align: center;
}

 <div class="footer">
   Footer is always bootom
 </div>

— rashedcs
fonte

Non funziona. Si attacca sempre al fondo anche se abbiamo una pagina molto grande. Non può scorrere con tutte le pagine, ma attenersi al fondo.

— fWd82,

Non funziona Il piè di pagina è in cima al contenuto.

— indolentdeveloper

1

ecco i miei due centesimi. In confronto ad altre soluzioni, non è necessario aggiungere contenitori aggiuntivi. Pertanto questa soluzione è un po 'più elegante. Sotto l'esempio di codice spiegherò perché funziona.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style>

            html
            {
                height:100%;
            }

            body
            {
                min-height:100%;
                padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/
                margin:0; /*see above comment*/
            }

            body
            {
                position:relative;
                padding-bottom:60px; /* Same height as the footer. */           
            }

            footer
            {
                position:absolute;
                bottom:0px;
                height: 60px;

                background-color: red;
            }

        </style>
    </head>
    <body>
        <header>header</header>


        <footer>footer</footer>
    </body>
</html>

Quindi la prima cosa che facciamo è rendere il contenitore più grande (html) al 100%. La pagina HTML è grande quanto la pagina stessa. Successivamente impostiamo l'altezza del corpo, può essere maggiore del 100% del tag html, ma dovrebbe essere almeno altrettanto grande, quindi utilizziamo l'altezza minima del 100%.

Rendiamo anche il corpo relativo. Relativo significa che puoi spostare l'elemento del blocco attorno al relativo dalla sua posizione originale. Non lo usiamo qui però. Perché il parente ha un secondo uso. Qualsiasi elemento assoluto è assoluto alla radice (html) o al primo genitore / nonno relativo. Questo è ciò che vogliamo, vogliamo che il piè di pagina sia assoluto, rispetto al corpo, ovvero al fondo.

L'ultimo passaggio consiste nell'impostare il piè di pagina in assoluto e in basso: 0, che lo sposta in fondo al primo genitore / nonno che è relativo (corpo del corso).

Ora abbiamo ancora un problema da risolvere, quando riempiamo la pagina completa, il contenuto va sotto il piè di pagina. Perché? bene, perché il piè di pagina non è più all'interno del "flusso html", perché è assoluto. Quindi come lo sistemiamo? Aggiungeremo il fondo imbottito al corpo. Questo assicura che il corpo sia effettivamente più grande del suo contenuto.

Spero di averlo chiarito molto per voi ragazzi.

— David
fonte

1

Una fodera dinamica con jQuery

Tutti i metodi CSS che ho incontrato sono troppo rigidi. Inoltre, l'impostazione del piè di pagina fixednon è un'opzione se non fa parte del progetto.

Testato su:

Cromo: 60
FF: 54
IE: 11

Supponendo questo layout:

<html>

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

</html>

Utilizzare la seguente funzione jQuery:

$('#content').css("min-height", $(window).height() - $("#footer").height() + "px");

Ciò che fa è impostare la min-heightper l'altezza della finestra - l'altezza del piè di pagina#content che cosa mai che potrebbe essere in quel momento.

Dal momento che abbiamo usato min-height, se l' #contentaltezza supera l' altezza della finestra , la funzione degrada con garbo e non ha alcun effetto poiché non è necessaria.

Guardalo in azione:

$("#fix").click(function() {
  $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  text-align: center;
  background: #444
}

#content {
  background: #999;
}

#footer {
  background: #777;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  <div id="content">
    <p>Very short content</p>
    <button id="fix">Fix it!</button>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>

Espandi frammento

Stesso frammento su JsFiddle

Bonus:

Possiamo andare oltre e adattare questa funzione al ridimensionamento dinamico dell'altezza del visualizzatore in questo modo:

$(window).resize(function() {
    $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
  }).resize();

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  text-align: center;
  background: #444
}

#content {
  background: #999;
}

#footer {
  background: #777;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  <div id="content">
    <p>Very short content</p>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>

Espandi frammento

— Ho Haz Kode
fonte

1

Puoi farlo

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
}

— Abdallah Abdillah
fonte

0

Basta impostare HTML, body e le altre righe tranne il piè di pagina al 100%. per esempio

<body>
<header></header>
<content></content>
<footer></footer>

il css diventa

html, body, header, content{
height:100%;
}

— Olatunde G.
fonte

0

<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>


#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}

— San Jaisy
fonte

0

Che dire di questo:

<div style="min-height: 100vh;"> 
 content
</div>

<footer>
 copyright blah blah
</footer>

— novecentonove
fonte

Mentre questo codice può rispondere alla domanda, fornendo un contesto aggiuntivo riguardo al perché e / o al modo in cui questo codice risponde alla domanda migliora il suo valore a lungo termine.

— β.εηοιτ.βε

-1

Ho usato nei miei numerosi progetti e non ho mai avuto nessun problema :)

per riferimento, i codici sono in frammento

* {
	margin: 0;
}
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
	height: 100%;
	margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
  background:green;
}
.footer, .push {
	height: 50px; /* .push must be the same height as .footer */
}

.footer{
  background:gold;
  }

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
  <div class="wrapper">
    Content Area
    </div>
  
  <div class="push">
    </div>
  
  <div class="footer">
    Footer Area
    </div>
</body>
</html>

Espandi frammento

— Santosh Khalse
fonte

CSS per fare in modo che il piè di pagina HTML rimanga nella parte inferiore della pagina con un'altezza minima, ma non si sovrapponga alla pagina

VISUALIZZA DEMO

Metodo Flexbox:

position:absolute metodo: (non consente l'altezza del piè di pagina dinamico)

Metodo di layout della tabella:

Css

html

Una fodera dinamica con jQuery

Bonus:

`position:absolute` metodo: (non consente l'altezza del piè di pagina dinamico)