Zatrzymaj stopkę u dołu za pomocą Javascriptu

W tej chwili próbuję zachować stopkę u dołu z Javascriptem. Jest to wynik:Zatrzymaj stopkę u dołu za pomocą Javascriptu

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

Mój pomysł polegał na wzięciu wysokości pojemnika div i porównaniu go z wysokością rozdzielczości komputera. Jeśli wysokość kontenera div jest mniejsza niż wysokość rozdzielczości komputera, ustaw dla div footer position: fixed;

Ale w skrypcie występuje problem, ponieważ nie działa.

Kolejne pytanie, skrypt, który stworzyłem byłby w porządku, aby utrzymać stopkę na dole?

HTML:

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

Źródło

2015-05-16 Keaire

Dlaczego nie użyć [CSS lepką stopkę] (http : //ryanfait.com/sticky-footer/) (metoda [wersja HTML5] (http://ryanfait.com/html5-sticky-footer/))? – SmokeyPHP

"DOMContentLoaded" tylko przypadku pożarów gdy dokument jest gotowy podobny do jQuery $(document.ready).

i dla stylów można używać klasy zamiast ustawiania każdego stylu za pomocą javascript.

Kod

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>

Źródło

2015-05-16 15:02:01

Proszę dodać wyjaśnienie, co robi twój kod i dlaczego napisałeś go w ten sposób. Odpowiedzi tylko na kod są ogólnie mile widziane. –

Dzięki jed-panda, teraz działa. I dzięki za sugestię dodania klasy. – Keaire

Nie będzie działać, jeśli wysokość ekranu jest zbyt mała, aby pasowała do stopki i treści. –

I sprawa twoja funkcja działa bardzo dobrze. może to, czego brakuje, to wywołanie funkcji.

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

zobaczyć ten jsfiddle

Źródło

2015-05-16 14:54:34

Jeśli to, co chcesz, aby utrzymać stopkę na dole strony, trzeba przeczytać. cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/

Możesz to zrobić bez js.

Źródło

2015-05-16 15:05:04

Funkcja nie jest wywoływana podczas ładowania. Możesz dołączyć KeepFoot funkcji bezpośrednio do znacznika body tak Zamiast nazywać tak:

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

lub używać mojego kod poniżej:

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

Źródło

2015-05-16 15:13:02

Zatrzymaj stopkę u dołu za pomocą Javascriptu

Odpowiedz

Powiązane problemy