Нижний колонтитул

Я пытаюсь сделать нижний колонтитул показами за содержимым при прокрутке к концу веб-сайта, это трудно объяснить, поэтому я сделал это gif

http://imageshack.us/f/687/newdw.gif/

Я пытался искать в Интернете учебные пособия, и то, что я нахожу, не то, что я ищу (все, что я видел, это слайд и слайд вниз).

Помогло бы много, если вы можете указать мне на учебник или объяснить, как это сделать.

Ответ 1

Следующее должно делать то, что вы хотите, используя только css.

http://jsfiddle.net/zVLrb/

Это решение зависит от того, как ведут себя элементы с position:fixed. Этот код будет означать, что на более коротких страницах, то есть на тех, которые не вызывают появление полосы прокрутки, нижний колонтитул останется фиксированным в нижней части страницы, а не с содержимым.

В основном нижний колонтитул всегда прикреплен к нижней части окна/окна просмотра, так как пользователь прокручивает, но большую часть времени вы не видите его, потому что остальная часть страницы плавает над ним - это вызвано используя более высокий индекс z для содержимого страницы, чем нижний колонтитул. Используя нижнее поле той же высоты, что и нижний колонтитул, мы разрешаем пространство для нижнего колонтитула, но только в нижней части страницы.:)

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

CSS

.rest {
    position: relative;
    z-index: 100;
    background: #fff;
    margin-bottom: 200px;
    overflow: hidden;
}

.footer {
    height: 200px;
    width: 100%;
    background: #000;
    position: fixed;
    bottom: 0;
    z-index: -1;
    color: white;
    text-align: center;
    font-size: 20pt;
}

.footer p {
    margin-top: 50px;
}

Разметка

<div class="rest">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat
    euismod urna, eget interdum eros elementum in. Morbi dictum molestie
    porta. Morbi eget consectetur nibh. Etiam sed arcu ac elit dignissim
    consequat.
  </p>
  <!-- obviously this content would need to go on for longer to 
       cause the page to scroll //-->
</p>
</div>
<div class="footer">
    <p>This is the footer</p>
</div>

Обновление

Я не могу вспомнить, но я думаю, что с более старым Internet Explorer отрицательный z-index может поставить нижний колонтитул ниже слоя body.. (что означает, что он вообще не будет видимым), поэтому лучше всего использовать z-index:2 для .rest и z-index:1 для нижнего колонтитула. У меня не будет возможности проверить это немного, но обновится, когда смогу.