Arhn - архитектура программирования

Как сделать так, чтобы фоновое изображение прилипало к низу браузера

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

Код CSS, который у меня есть для этого изображения:

#site-container {width:100%; background:url(.../site-bg-foot.jpg) no-repeat left bottom;}

и он отлично работает для страниц, где контент длиннее.

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

Спасибо

wordpress html css footer sticky-footer
13.11.2013

Ответы:


1

Пытаться:

position: fixed;
bottom: 0;

Для нижнего колонтитула в вашем CSS

Я также рекомендую вам прочитать это article на случай, если вышеизложенное вам не совсем подходит:

HTML

<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</body>

CSS

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    padding:10px;
    background:#5ee;
}
#content {
    padding:10px;
    padding-bottom:80px;   /* Height of the footer element */
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
    background:#ee5;
}
13.11.2013
  • Я попробовал это, но теперь изображение нижнего колонтитула появляется внизу браузера и в верхней части содержимого. Он должен появиться после окончания контента 13.11.2013
  • Что ж, я нашел проблему!!.. у меня был избыточный код в моем css, я его исправил, и теперь он работает отлично! Спасибо 13.11.2013

    • 2

    Вот jsfiddle, чтобы узнать, что может решить вашу проблему.

    Сначала я добавил position:fixed; и bottom:0; в класс .footer div.

    HTML:

    <div class="content">
<p>Praesent aliquam varius dolor.</p>
</div>

<div class="footer">Curabitur interdum, lorem quis feugiat interdum.
</div>

    CSS:

    body {
    margin:0;
}
.content {
    width: 100%;    
    margin-bottom: 1em;
}

.footer {
    position: fixed;
    bottom: 0;
    height: 50px;
    width: 100%;
    background-color: #e5e5e5;
}
    13.11.2013
    Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..