Плавающий нижний колонтитул всегда на дне и видимый

У меня есть такой сайт, как этот: → website < <. Он построен из 2-х кадров - основного и нижнего колонтитула. Я пытался заставить его работать без фреймов (не работает на мобильных телефонах). Есть ли какой-либо простой метод CSS или jQuery, чтобы выровнять нижний колонтитул внизу, чтобы быть видимым всегда? так что эффект похож на веб-сайт выше? Я пытался использовать css, но нижний колонтитул появляется только тогда, когда я прокручиваю его вниз. Я хочу, чтобы нижний колонтитул охватывал фактический контент, поэтому он всегда, например, 50 пикселей высок и всегда отображается в нижней части экрана. даже если страница высотой 10000 пикселей. Я считаю это чем-то простым, но где-то там я где-то потерялся. Спасибо за вашу помощь заранее

Ответ 1

Да. Это свойство position: fixed.

.footer {
    position: fixed; 
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
}

Демо: http://jsfiddle.net/ZsnuZ/

Ответ 2

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();

Ответ 3

Продолжение от Сэма Джонса:

В основном это проверяет, будет ли высота документа заполнять окно, если оно меньше окна, оно будет прикрепляться к нижней части окна, если документ больше размера окна, который он будет прикреплять к в нижней части документа (так что это видно только при прокрутке вниз).

Если вы измените размер окна, он пересчитает и все будет работать правильно!

CSS

#footer {
  bottom: 0px;
}

HTML

<div id="footer">
  Footer content
</div>
<script>
  var footerResize = function() {
    $('#footer').css('position', $("body").height() + $("#footer").innerHeight() > $(window).height() ? "inherit" : "fixed");
  };
  $(window).resize(footerResize).ready(footerResize);
</script>

Ответ 4

Для меня это работает лучше, потому что высота тела включает нижний колонтитул, когда позиция статична или наследуется:

   var footerResize = function() {
            if ($('#footer').css('position') == "fixed")
                $('#footer').css('position', $("body").height() + $("#footer").height() > $(window).innerHeight() ? "inherit" : "fixed");
            else
                $('#footer').css('position', $("body").height() > $(window).innerHeight() ? "inherit" : "fixed");

};

Он остается внизу, когда теперь растет окно.