Tieni il footer in basso con Javascript

Al momento sto cercando di mantenere il footer in basso con Javascript. Questo è il risultato:Tieni il footer in basso con Javascript

document.getElementsByTagName('body').onload = function() {KeepFoot()}; 
var element = document.getElementById('container'); 
var height = element.offsetHeight; 

function KeepFoot() { 
    if (height < screen.height) { 
     document.getElementById("footer").style.position = "fixed"; 
     document.getElementById("footer").style.bottom = "0"; 
     document.getElementById("footer").style.left = "0"; 
     document.getElementById("footer").style.right = "0"; 
    } 
}

La mia idea era di prendere l'altezza del div contenitore e confrontarlo con l'altezza della risoluzione del PC. Se l'altezza del contenitore div è inferiore all'altezza della risoluzione del PC, impostare il div footer position: fixed;

Ma c'è un problema nello script perché non funziona.

Un'altra domanda, la sceneggiatura che ho creato andrebbe bene per mantenere il piè di pagina in fondo?

HTML:

<html> 
    <head> 
     ... 
    </head> 
    <body> 
     <div id="container"> 
      <div id="header"></div> 
      <div id="content"></div> 
      <div id="footer"></div> 
     </div> 
    </body> 
</html>

fonte

2015-05-16 Keaire

Perché non utilizzare il [CSS piè di pagina appiccicoso] (http : //ryanfait.com/sticky-footer/) ([HTML5 version] (http://ryanfait.com/html5-sticky-footer/) metodo? – SmokeyPHP

"DOMContentLoaded" unico evento incendi quando il documento è pronto simile a jQuery di $(document.ready).

e, per gli stili è possibile utilizzare la classe invece di impostare ogni stile utilizzando javascript.

Codice

document.addEventListener("DOMContentLoaded", function (event) { 
 
    var element = document.getElementById('container'); 
 
    var height = element.offsetHeight; 
 
    if (height < screen.height) { 
 
     document.getElementById("footer").classList.add('stikybottom'); 
 
    } 
 
}, false);

#footer.stikybottom { 
 
    position: fixed; 
 
    bottom:0; 
 
    left: 0; 
 
    right:0; 
 
}

<div id="container"> 
 
    <div id="header">header</div> 
 
    <div id="content">Conent</div> 
 
    <div id="footer">Something in footer</div> 
 
</div>

fonte

2015-05-16 15:02:01

Aggiungi una spiegazione di cosa fa il tuo codice e perché l'hai scritto in questo modo. Le risposte al solo codice sono generalmente disapprovate. –

Grazie jed-panda, ora funziona. E grazie per il suggerimento di aggiungere una classe. – Keaire

Questo non funzionerà se l'altezza dello schermo è troppo piccola per adattarsi al piè di pagina + al contenuto. –

io cosa la vostra funzione funziona molto bene. forse ciò che manca è la funzione che chiama.

function KeepFoot() { 
    if (height < screen.height) { 
     document.getElementById("footer").style.position = "fixed"; 
     document.getElementById("footer").style.bottom = "0"; 
     document.getElementById("footer").style.left = "0"; 
     document.getElementById("footer").style.right = "0"; 
    } 
} 

KeepFoot();

vedere questo jsfiddle

fonte

2015-05-16 14:54:34

Se quello che vuoi è quello di mantenere il piè di pagina nella parte inferiore della pagina, è necessario leggere questo. cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/

Si può fare senza js.

fonte

2015-05-16 15:05:04

La funzione non viene richiamata sul carico. È possibile collegare la funzione KeepFoot direttamente al tag corpo come questo Invece di chiamare in questo modo:

document.getElementsByTagName('body').onload = function() {KeepFoot()};

o utilizzare il mio codice da sotto:

(function() { 
    var offsetHeight = document.getElementById('container').offsetHeight; 
    var screenHeight = screen.height; 

if(offsetHeight < screenHeight){ 
    document.getElementById("footer").style.position = "fixed"; 
    document.getElementById("footer").style.bottom = "0"; 
    document.getElementById("footer").style.left = "0"; 
} 
})();

fonte

2015-05-16 15:13:02

Tieni il footer in basso con Javascript

risposta

Problemi correlati