Сохраните нижний колонтитул внизу с помощью Javascript

На данный момент я пытаюсь сохранить нижний колонтитул внизу с помощью Javascript. Это результат:Сохраните нижний колонтитул внизу с помощью 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"; 
    } 
}

Моей идея состояла в том, чтобы взять высоту контейнера сНа и сравнить его с высотой разрешения ПК. Если высота контейнера div меньше высоты разрешения ПК, установите нижний колонтитул position: fixed;

Но проблема в скрипте возникает, потому что это не работает.

Другой вопрос, сценарий, который я создал, будет в порядке, если нижний колонтитул внизу?

HTML:

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

источник

2015-05-16 Keaire

Почему бы не использовать [CSS липкие колонтитул] (HTTP : //ryanfait.com/sticky-footer/) ([HTML5 версия] (http://ryanfait.com/html5-sticky-footer/)) метод? – SmokeyPHP

"DOMContentLoaded" событий только пожары, когда документ будет готов похож на JQuery-х $(document.ready).

и, для стилей вы можете использовать класс вместо того, чтобы устанавливать каждый стиль с помощью javascript.

Код

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>

источник

2015-05-16 15:02:01

Пожалуйста, добавьте объяснение того, что делает ваш код, и почему вы написали его таким образом. Ответы только на код, как правило, не одобряются. –

Спасибо, jed-panda, теперь это работает. И спасибо за предложение добавить класс. – Keaire

Это не будет работать, если высота экрана слишком мала, чтобы соответствовать нижнему колонтитулу + содержание. –

я вещь ваша функция работает очень хорошо. возможно, отсутствует функция вызова функции.

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

увидеть этот jsfiddle

источник

2015-05-16 14:54:34

Если то, что вы хотите, чтобы поддерживать колонтитула в нижней части страницы, вы должны прочитать это. cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/

Вы можете сделать это без js.

источник

2015-05-16 15:05:04

Функция не вызывается при загрузке. Вы можете прикрепить функцию KeepFoot непосредственно в тег тела, как это Вместо вызова, как это:

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

или использовать мой код из ниже:

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

источник

2015-05-16 15:13:02

Сохраните нижний колонтитул внизу с помощью Javascript

ответ

Смежные вопросы