Почему мой липкий нижний колонтитул не работает?

Question

Я пытаюсь сделать липкий нижний колонтитул, но он не совсем работает для меня.

КОД: http://jsfiddle.net/PC8x7/1/

Как вы можете видеть в режиме реального времени, нижний колонтитул приходитпод остальной частью страницы, но вы должны прокрутить, чтобы попасть туда.Как я могу избежать этого, и иметь только полосу прокрутки, когда это необходимо?

Answer 1

Вы должны избавиться от полей в основных контейнерах и заголовках

см. Примечание о высотах и ​​полях http://www.cssstickyfooter.com/using-sticky-footer-code.html

Answer 2

Ваша обертка имеет min-height: 100%;, а нижний колонтитул находится под оберткой. Обертка составляет 100% высоты страницы, а нижний колонтитул помещается прямо под страницей, заставляя прокручиваться.

Есть несколько способов обойти эту проблему. Вы можете попытаться поместить нижний колонтитул внутрь обертки, установить относительное положение обертки и установить абсолютное положение нижнего колонтитула.

CSS:

.wrapper {
    min-height: 100%;
    position: relative;
}

.footer {
    position: absolute;
    bottom: 0;
}

.footer-link {
    text-align: center;
}

HTML:

<div class="wrapper">
  ...

  <div class="footer">
    <div class="footerlink">
      <p><span>&copy; Domain.tld</span> | </p>
    </div>
  </div>
</div>

Answer 3

Как я понимаю - вы хотите поставить нижний колонтитул в нижней части окна?

метод А. - сделать это положение: фиксированный

метод Б. - тренировка с высотой обертки 100%, переполнением и рамкой http://www.quirksmode.org/css/box.html. Вы можете поместить нижний колонтитул поверх отступа обертки таким образом

метод С. - Javascript

Answer 4

Я полагаю, вы ищете фиксированный нижний колонтитул, расположенный за нижней страницы? Затем вам нужно стилизовать его с фиксированной позицией и нижней точкой на нуле

position:fixed; bottom:0px;

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

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

<style>
* {
    margin:0px;
    padding:0px;
}
.page {
    min-height:100%;
    height: auto !important; // modern browser see this instead of the height: 100%
    height: 100%; // IE sees this but allows block to expand.
    position: absolute;
    width: 100%;
}
</style>

<div class="page">

<div style="height:100px; "> content</div>
<div style="position:absolute; bottom:0px; ">

Min height Hack to make page be at least 100% of screen size
but if content is bigger then scroll bars appear and
this information is under the content. Works with quick mode browsers.

</div>
</div>