Нижний колонтитул за содержимым

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

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

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

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


html jquery css footer slideup
person Ale Capellan    schedule 26.10.2012    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Следующее должно делать то, что вы хотите, используя только 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-индекс может поместить нижний колонтитул ниже слоя body.. (это означает, что он вообще не будет виден), так что лучше используйте z-index:2 для .rest и z-index:1 для нижнего колонтитула. У меня не будет возможности немного проверить это, но я обновлю, когда смогу.

person Pebbl    schedule 26.10.2012
comment
хех, нет проблем - я провожу слишком много времени, возясь со странными трюками css :) в любом случае, надеюсь, что это поможет вашему проекту. - person Pebbl; 27.10.2012