Altbilgiyi altta Javascript

ile saklayın. Şu anda altbilgiyi Javascript ile altta tutmaya çalışıyorum. Bu sonuç ise:Altbilgiyi altta 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"; 
    } 
}

Benim fikrim div kabın yüksekliği alıp pc çözünürlüğü yüksekliği ile karşılaştırmaktır. Div kapsayıcısının yüksekliği, bilgisayarın çözünürlüğünün yüksekliğinden küçükse, position: fixed;

olarak ayarlanmışsa, ancak çalışmadığı için komut dosyasında bir sorun vardır.

Başka bir soruda, oluşturduğum betik altbilgiyi altta tutmak için iyi olur mu?

HTML: senin fonksiyonu çok iyi çalışıyor

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

kaynak

2015-05-16 Keaire

http : //ryanfait.com/sticky-footer/) ([HTML5 sürümü] (http://ryanfait.com/html5-sticky-footer/)) yöntemi? – SmokeyPHP

"DOMContentLoaded" olay sadece yangınları görüyoruz.

ve stiller için javascript kullanarak her stili ayarlamak yerine sınıfı kullanabilirsiniz.

Kod ne istediğiniz sayfanın altındaki altbilgi korumak ise

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>

kaynak

2015-05-16 15:02:01

Lütfen kodunuzun ne yaptığını ve neden bu şekilde yazdığınızı açıklayın. Kod sadece cevaplar genellikle kaşlarını çattı. –

Teşekkürler jed-panda, şimdi çalışıyor. Bir ders ekleme önerisi için teşekkürler. – Keaire

Ekran yüksekliği altbilgi + içeriğe sığmayacak kadar küçükse işe yaramaz. –

Ben şey. belki eksik olan fonksiyon çağırıyor. Belge jquery en $(document.ready) hazır benzer olduğunda

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

bu jsfiddle

kaynak

2015-05-16 14:54:34

, bunu okumalı. cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/

Bunu js olmadan yapabilirsiniz.

kaynak

2015-05-16 15:05:04

İşlev, yükte çağrılmıyor.

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

ya da aşağıdan kodumu kullanmak: Sen Yerine böyle çağıran böyle gövde etiketinin doğrudan işlev KeepFoot ekleyebilirsiniz [CSS yapışkan altbilgi] kullanmayın Neden (

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

kaynak

2015-05-16 15:13:02

Altbilgiyi altta Javascript

cevap

İlgili konular