Halten Sie die Fußzeile an der Unterseite mit Javascript

Im Moment versuche ich, die Fußzeile an der Unterseite mit Javascript zu halten. Dies ist das Ergebnis:Halten Sie die Fußzeile an der Unterseite mit 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"; 
    } 
}

Meine Idee, die Höhe des div-Container und vergleichen Sie es mit der Höhe der Auflösung des PC zu nehmen war. Wenn die Höhe des Div-Containers kleiner als die Höhe der Auflösung des PCs ist, legen Sie den Div-Fuß fest position: fixed;

Aber es gibt ein Problem im Skript, weil es nicht funktioniert.

Eine andere Frage, das Skript, das ich erstellt habe, wäre in Ordnung für die Fußzeile auf der Unterseite halten?

HTML:

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

Quelle

2015-05-16 Keaire

Warum nicht mit dem [CSS Sticky Footer] (http : //ryanfait.com/sticky-footer/) ([HTML5 Version] (http://ryanfait.com/html5-sticky-footer/)) Methode? – SmokeyPHP

"DOMContentLoaded" Ereignis nur ausgelöst, wenn Dokument bereit ähnlich wie jQuerys $(document.ready) ist.

und für Stile können Sie die Klasse verwenden statt jeden Stil mit Javascript zu setzen.

-Code

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>

Quelle

2015-05-16 15:02:01

Bitte fügen Sie eine Erklärung hinzu, was Ihr Code macht und warum Sie es so geschrieben haben. Code-only-Antworten sind in der Regel verpönt. –

Danke Jed-Panda, jetzt funktioniert es. Und danke für den Vorschlag, eine Klasse hinzuzufügen. – Keaire

Dies funktioniert nicht, wenn die Bildschirmhöhe zu klein ist, um der Fußzeile + dem Inhalt zu entsprechen. –

ich, was Ihre Funktion sehr gut funktioniert. vielleicht fehlt die Funktion Calling.

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();

sehen dieses jsfiddle

Quelle

2015-05-16 14:54:34

Wenn das, was Sie wollen, ist die Fußzeile auf der Unterseite der Seite zu erhalten, müssen Sie dies lesen. cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/

Sie können es ohne js tun.

Quelle

2015-05-16 15:05:04

Die Funktion wird beim Laden nicht aufgerufen. Sie können die Funktion KeepFoot direkt auf den Körper Tag wie folgt befestigen Stattdessen wie folgt zu nennen:

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

oder von unten meinen Code verwenden:

(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"; 
} 
})();

Quelle

2015-05-16 15:13:02

Halten Sie die Fußzeile an der Unterseite mit Javascript

Antwort

Verwandte Themen