Mantenere il piè di pagina nella parte inferiore del sito Web reattivo

Mi piacerebbe che il mio piè di pagina si mostri sempre in fondo alle pagine e non si muova quando c’è poco contenuto di pagina. Provai

body, html { height: 100%} html body.wide #wrapper.container { min-height: 100%; position: relative; padding-bottom: 226px!important;/*Footer height*/ } #containerfooter { position: absolute; bottom: 0; left: 0; width: 100%; } 

ma dal momento che il mio sito è reattivo, l’altezza del footer varia e questo codice nasconderà il contenuto su alcune pagine. C’è un modo per farlo funzionare?

Se l’altezza del piè di pagina varia in base alla larghezza dello schermo, fissarla nella parte inferiore della finestra o dello schermo non sarà la soluzione.

Ho l’impressione che il contenuto del piè di pagina si avvolga o collassi uno sotto l’altro man mano che le dimensioni dello schermo diminuiscono, quindi imposta piuttosto un’altezza minima su qualsiasi elemento avvolga il contenuto della pagina.

Un esempio di penna di codice

 $("#addBodyContent").on("click", function() { $("

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

").appendTo(".page-wrap .content"); }); $("#addFooterContent").on("click", function() { $("

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

").appendTo(".site-footer .content"); });
 * { margin: 0; } html, body { height: 92%; font-family: "Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif; } .page-wrap { min-height: 100%; box-sizing: border-box; padding: 10px; } .page-wrap:after { content: ""; display: block; } .site-footer { background: black; position: relative; left: 0; right: 0; bottom: 0; min-height: 100px; text-align: center; padding: 10px; color: white; box-sizing: border-box; } button.dark:hover { background-color: rgba(0, 0, 0, 0.7); } button.dark { background-color: black; border: 3px solid black; padding: 10px 30px; color: white; cursor: pointer; transition: .7s; } button.light:hover { background-color: #CCCCCC; } button.light { background-color: white; border: 3px solid white; padding: 10px 30px; color: black; cursor: pointer; transition: .7s; } .content p { margin-bottom: 10px; } .content { border-top: 1px solid black; padding-top: 10px; } 
  

Header




Footer




Usa posizione: fissa. In #containerfooter

 #containerfooter { position: fixed; bottom: 0; left: 0; width: 100%; } 

per “sticky footer” vedi questo tutorial