Come si può definire un piè di pagina appiccicoso a altezza variabile in puro CSS?

La chiave da notare qui è che l'altezza del piè di pagina non verrà riparata, ma varierà con il suo contenuto.Come si può definire un piè di pagina appiccicoso a altezza variabile in puro CSS?

Quando dico "sticky footer", lo uso in quello che capisco essere la definizione comune di "un piè di pagina che non è mai più alto del fondo del viewport, ma se c'è abbastanza contenuto, sarà nascosto fino a quando l'utente non scorre abbastanza lontano per vederlo. "

Nota anche io non ho bisogno di supportare i browser legacy. Se le proprietà correlate allo & dei CSS aiutano qui, sono un gioco leale.

fonte

2012-05-31 Alan H.

Tutte le altre soluzioni qui non sono aggiornati e utilizzare sia JavaScript, o table hack.

Con l'avvento dello CSS flex model, risolvere il problema del piè di pagina ad altezza variabile diventa molto, molto semplice: mentre è noto soprattutto per il layout del contenuto in direzione orizzontale, Flexbox funziona anche per i problemi di layout verticale. Tutto ciò che devi fare è avvolgere le sezioni verticali in un contenitore flessibile e scegliere quali espandere. Prenderanno automaticamente tutto lo spazio disponibile nel loro contenitore.

Nota quanto sono semplici il markup e il CSS. Nessun hack da tavolo o altro.

Il modello flessibile è supported by all major browsers e presumibilmente IE11 +, anche se il mio IE non rende ancora questo snippet correttamente.

html, body { 
 
    height: 100%; 
 
    margin: 0; padding: 0; /* to avoid scrollbars */ 
 
} 
 

 
#wrapper { 
 
    display: flex; /* use the flex model */ 
 
    min-height: 100%; 
 
    flex-direction: column; /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */ 
 
} 
 

 
#header { 
 
    background: yellow; 
 
    height: 100px; /* can be variable as well */ 
 
} 
 

 
#body { 
 
    flex: 1; 
 
    border: 1px solid orange; 
 
} 
 

 
#footer{ 
 
    background: lime; 
 
}

<div id="wrapper"> 
 
    <div id="header">Title</div> 
 
    <div id="body">Body</div> 
 
    <div id="footer"> 
 
    Footer<br/> 
 
    of<br/> 
 
    variable<br/> 
 
    height<br/> 
 
    </div> 
 
</div>

fonte

2014-10-25 00:18:44

Grazie per aver rianimato questa domanda con una tecnica nuova (se meno compatibile), completa di codice eseguibile. A + –

Infatti. Forse la parte migliore è che si degrada bene. –

questo non funziona in safari 8. – Mathias

Si può attaccare il piè di pagina nella parte inferiore della finestra appena con:

position: fixed; 
bottom: 0;

Tuttavia che farà apparire anche se non c'è il contenuto.

Per evitare questo, avrete bisogno di un po 'di JavaScript:

(window.onscroll = function() { 
    var foot = document.getElementById('footer'); 
    foot.style.position = "static"; 
    if(foot.offsetTop < document.documentElement.scrollTop + document.body.scrollTop + document.documentElement.offsetHeight - foot.offsetHeight) 
     foot.style.position = "fixed"; 
})();

(Il (...)(); involucro rende la funzione onscroll ottenere chiamato una volta quando la pagina viene caricata, dal momento che è necessario troppo)
(La funzione di cui sopra è non testati , ma dovrebbe funzionare - se non lo fa, me lo faccia sapere e farò una pagina di prova reale)

fonte

2012-05-31 00:10:32

(...)(); è solo un auto che esegue fn non è vero? –

Sì: in pratica, la funzione viene richiamata una volta senza necessità di scorrimento, quindi nuovamente ogni volta che viene attivato un evento onscroll. –

Quindi questo non è corretto? "(Il (...)(); wrapper rende la funzione onscroll chiamata una volta quando viene caricata la pagina, poiché anche questo è necessario)" –

l'altezza variabile del piè di pagina causa un piccolo problema, ma il seguente dovrebbe funzionare:

<html> 
<head> 
<style type="text/css"> 
html { height: 100%; } 
body { min-height: 100%; } 
.container { min-height: 100%; position: relative; } 
.content { padding-bottom: 200px; } 
.footer { position: absolute; bottom: 0px; background: #ebebeb; text-align: centre; } 
</style> 
</head> 
<body> 
<div class="container"> 
    <div class="content"> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
    </div> 
    <div class="footer"> 
     <p>This is my footer.</p> 
     <p>This is another line of my footer.</p> 
    </div> 
</div> 
</body> 
</html>

L'imbottitura nella parte inferiore di .content indica che il piè di pagina non si sovrapporrà mai al contenuto. Tuttavia, dato il vostro piè di pagina sarà dimensioni variabili avrei usare JavaScript per impostare in modo dinamico l'imbottitura sul fondo del contenuto, una volta al caricamento della pagina o ogni volta che si cambia l'altezza del piè di pagina:

<script type="text/javascript"> 
$(function() { 
    $(".content").css("padding-bottom", parseInt($(".footer").height() + 20) + 'px'); 
}); 
</script>

ti conosco detto puro CSS ma non credo ci sia un modo dato l'altezza variabile e le condizioni di appiccicosità. Penso che questo sia il metodo meno javascript.

fonte

2012-05-31 00:49:45 Anthony

Si può assolutamente farlo in puro CSS. Clicky the linky.

Questo concetto utilizza display: table-cell per organizzare le sezioni di pagina anziché il normale display: block.

HTML

<body class="Frame"> 
    <header class="Row"><h1>Catchy header</h1></header> 
    <section class="Row Expand"><h2>Awesome content</h2></section> 
    <footer class="Row"><h3>Sticky footer</h3></footer> 
</body>

CSS

.Frame { 
    display: table; 
    table-layout: fixed; 
    height: 100%; 
    width: 100%; 
} 
.Row { 
    display: table-row; 
    height: 1px; 
} 
.Row.Expand { 
    height: auto; 
}

fonte

2012-09-04 01:21:19 cereallarceny

Mentre il codice di esempio manca qualcosa, sì, è possibile con questa tecnica. –

Hai ragione! Ho apportato le mie modifiche per correggerlo, felice che abbia funzionato per te! – cereallarceny

Nessun esempio di cella di tabella. Intendevi 'table-row'? Ad ogni modo, il modo moderno per farlo è utilizzare il [modello CSSbox CSS] (https://stackoverflow.com/a/26558049/1269037). –

Come si può definire un piè di pagina appiccicoso a altezza variabile in puro CSS?

risposta

Problemi correlati