CSS, как создать недоступный нижний колонтитул

0

Я хочу создать нижний колонтитул, как нижний колонтитул на elementaryos.org. Я не знаю, какой код CSS, который делает нижний колонтитул ниже контейнера страницы, и будет представлен при прокрутке вниз.

<!doctype html>
<html lang="en">
<head>
    <title>Test page</title>
    <style type="text/css">
    body{
        margin: 0px;
        padding: 0px;
    }
    nav{
        background-color: yellow;
        width: 100%;
        position: fixed;
        z-index: 2;
        height: 70px;
    }
    .container{
        padding-top: 80px;
        width: 100%;
        background-color: #dadada;
        position: relative;
        z-index: 1;
        line-height: 3em;
    }
    footer{
        background-color: #bababa;
        height: 200px;
        width: 100%;
        position: relative;
        z-index: 0;
    }
    </style>
</head>
<body>

<nav>
<h1>Navigation</h1>
</nav>

<div class="container">


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum enim odio, vel placerat dui aliquam sed. Vivamus rhoncus massa commodo nulla scelerisque accumsan. Nunc ac ligula velit. Mauris eu pharetra turpis, eget fermentum lectus. Maecenas ornare sem vel nisi accumsan, at placerat libero vulputate. Pellentesque sit amet neque ac est dapibus faucibus. Morbi pellentesque, dolor ut elementum mattis, lectus nunc auctor nulla, vel lobortis quam ante eu neque.

Mauris sed ligula in lorem rhoncus volutpat. Ut pulvinar dolor id bibendum mollis. Morbi eu facilisis risus. Nullam quis eros elit. Donec quis facilisis dui. Duis hendrerit, lectus id ultrices tincidunt, urna tellus convallis quam, eget vehicula ipsum arcu vitae nulla. Etiam tristique varius enim nec volutpat. Fusce non odio nec massa placerat aliquam id eu ligula. Nam nulla urna, iaculis sit amet nisi non, auctor congue magna. Suspendisse potenti. Duis vehicula consectetur feugiat.

Quisque ut luctus diam. Aliquam quis blandit eros. Vestibulum dolor velit, egestas non vehicula et, viverra in lacus. Donec luctus id libero at tincidunt. Donec in euismod tortor, id fermentum mi. Phasellus leo dui, placerat sed enim elementum, aliquet convallis mauris. Duis cursus mauris vehicula tortor auctor faucibus. Praesent euismod enim eget luctus facilisis. Donec condimentum, neque id convallis consectetur, lorem ipsum gravida nisl, vel fermentum lectus diam at magna. Aenean in urna sagittis, condimentum magna nec, egestas neque. Nulla gravida neque massa.

Nulla consequat, quam at fringilla mollis, nunc magna dapibus eros, ut ultrices sapien mauris eu libero. Duis sollicitudin orci posuere est vulputate, eu vestibulum mi vestibulum. Etiam eu elementum nisi, consectetur accumsan turpis. Sed dignissim sapien et posuere interdum. In adipiscing gravida enim vestibulum suscipit. Aliquam aliquet sem et dapibus mollis. Praesent quis lorem augue. Donec facilisis justo vel est pharetra, eget rhoncus magna ultricies. Suspendisse ac justo quis dui accumsan dignissim at non sapien. Cras vitae ultrices justo, quis venenatis nibh. Sed vestibulum adipiscing enim non volutpat. Duis ac euismod sapien. Pellentesque sit amet ornare velit. Duis venenatis tempus facilisis.

Sed sem lectus, mattis ut nunc sit amet, dictum sollicitudin sapien. Integer vitae ornare tellus. Vestibulum et cursus urna, vel aliquet mi. Duis lacinia tincidunt lorem. Cras sem felis, bibendum eu lorem luctus, dictum imperdiet augue. Quisque eleifend lectus pellentesque arcu faucibus tempus. Etiam sollicitudin in est eu lacinia. Curabitur faucibus in neque et imperdiet. Mauris libero enim, suscipit sit amet odio eget, molestie ornare ligula. Nam a lorem convallis, ornare nibh id, viverra tellus. 
</div>
<footer>
    Page footer
</footer>
</body>
</html>

вот демо. Большое спасибо.

Теги:

2 ответа

3
Лучший ответ

Там вы идете: http://jsfiddle.net/8cxvr/2/

Это довольно просто, просто дайте нижнему колонтитуле фиксированное положение (= относительно окна), и контейнер получает некоторый запас на дне.

Соответствующие изменения:

.footer {
  position: fixed;
  bottom: 0;
}
.container {
  margin-bottom: 200px; /* footer-height */
}
Поделиться
  • 0
    спасибо, я не знал, что это так просто!
0

Чтобы начать, это ужасный эффект, пожалуйста, не делайте этого.

Для полного ответа, однако, то, что они сделали, фиксирует нижний колонтитул с позиционированием в нижней части страницы, а затем дает ему более низкий индекс z. Так что всегда на позиции. Как только вы прокрутите содержимое, оно появится в поле зрения. Вы можете использовать такой инструмент, как инструменты разработчика IE, или Firebug (для Firefox), чтобы посмотреть, как они работают с кодом.

Поделиться
  • 0
    Почему это ужасный эффект? Мне это нравится. Я видел нечто похожее на демонстрационной странице Unity3d, но не могу найти его прямо сейчас ...
  • 0
    Я использую инструменты разработчика на Firefox, но не могу понять, какое правило CSS делает этот эффект. Кстати, мне нравится этот эффект, не так уж ужасно для меня
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню