Создание липкого нижнего колонтитула

Question

Создание липкого нижнего колонтитула

0

Я работаю над дизайном сайта, и я пытаюсь сделать динамический нижний колонтитул, который остается в нижней части окна независимо от размера экрана. Использование фиксированного атрибута в CSS не работает, поскольку оно не прокручивается со страницы. Однако я сделал что-то подобное с плавающим div, но когда я попытался включить его в нижний колонтитул, это не сработает. Я просмотрел другие подобные вопросы, но каждый из них говорит, чтобы добавить position: fixed правило CSS. Какие-либо предложения?

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

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Robert Thompson</title>
        <link rel="stylesheet" href="styles/desktop.css">
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="includes/init.js"></script>
        <script type="text/javascript" src="includes/main.js"></script>
    </head>
    <body>
        <div id="main">
            <header></header>
            <div id="content">
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
            </div>
            <footer></footer>
        </div>
    </body>
</html>

CSS

body{
    position: relative;
    margin: 0;
    padding: 0;
    background-color: #757575;
    color: #FFFFFF;
    z-index: 0;
}

header, footer{
    position: relative;
    display: block;
    width: 100%;
    height: 50px;
    background-color: #000000;
    z-index: 2;
}

header{
    border-bottom: 3px inset #DDAA00;
}

footer{
    border-top: 3px outset #DDAA00;
}

#main{
    position: absolute;
    background-color: red;
    z-index: 1;
}

#content{
    position: relative;
    left: 250px;
    width: 70%;
    z-index: 1;
}

WASasquatch 16 апр. 2014, в 20:52

Источник

2

Смотрите CSS Sticky Footer ; это включает в себя завершение всего вашего содержимого в контейнере div и нижнего колонтитула в отдельном div .
TylerH 16 апр. 2014, в 18:40
0

вы используете margin-top и marginTop , если вы измените второй на margin-top он, вероятно, будет работать
orhanhenrik 16 апр. 2014, в 18:42
0

Вы имеете в виду, как этот пример с двумя изменениями? Все, что было добавлено, это position: relative тела и position: absolute по отношению к нижнему колонтитулу, а также удаление вашего странного поля.
WASasquatch 16 апр. 2014, в 18:46
0

@Izzey Animate не использует тире в своих именах.
WASasquatch 16 апр. 2014, в 18:47
1

Спасибо всем за помощь.
user3542456 16 апр. 2014, в 18:55

Показать ещё 3 комментария

Теги:

javascript

jquery

html

css

2 ответа

0

Взгляните на это: http://codepen.io/sheriffderek/pen/ziGbE

Это сочетание нескольких липких вариантов нижнего колонтитула - и некоторый дополнительный javascript для динамического изменения в зависимости от фактического содержимого нижнего колонтитула (который может отличаться при разных размерах экрана)

sheriffderek 16 апр. 2014, в 17:32

0

Спасибо, я тоже посмотрю на это.
user3542456 16 апр. 2014, в 19:15

Ещё вопросы

Смотрите CSS Sticky Footer ; это включает в себя завершение всего вашего содержимого в контейнере div и нижнего колонтитула в отдельном div .
вы используете margin-top и marginTop , если вы измените второй на margin-top он, вероятно, будет работать
Вы имеете в виду, как этот пример с двумя изменениями? Все, что было добавлено, это position: relative тела и position: absolute по отношению к нижнему колонтитулу, а также удаление вашего странного поля.
@Izzey Animate не использует тире в своих именах.

WASasquatch · Accepted Answer · 2014-04-16T17-49-00.000Z

1

Лучший ответ

Вам нужно будет использовать относительное положение и абсолютное. Таким образом, к вашему контейнеру (телу страницы) добавьте position: relative а затем в нижний колонтитул вы добавите position: absolute отсутствие необходимости в маржировании. Также загляните в CSS Sticky Footer, как TylerH указал вам тоже.

WASasquatch 16 апр. 2014, в 17:49

0

Большое спасибо.
user3542456 16 апр. 2014, в 18:56
0

@ user3542456 Добро пожаловать. Я много боролся с этим в прошлом и даже вчера с некоторым странным поведением полей (потому что я использовал поля с самого начала, а не контейнеры с отступами)
WASasquatch 16 апр. 2014, в 18:59
0

Я всегда боролся с этим. Я заставил его работать давным-давно, но это было давно, и я почти 18 месяцев не занимался CSS. Я также сражаюсь с проблемой «вся вершина против правила маржи». Иногда top работает идеально, а margin-top - нет, в других случаях margin-top работает идеально, а top - нет. Это странно.
user3542456 16 апр. 2014, в 19:14
0

@ user3542456 Да, трюк с полями, кажется, только в том случае, если вы используете другие элементы, которые обычно толкают нижний колонтитул, поэтому вы переворачиваете часть этого поля. Или используйте автоматическое поле, пытаясь отодвинуть нижний колонтитул от содержимого выше.
WASasquatch 16 апр. 2014, в 19:16
0

Я внес изменения, которые вы предложили, и отредактировал вопрос, но нижний колонтитул все еще не прикрепляется к нижней части окна. Извините, мне так больно от этого, но не могли бы вы оказать дополнительную помощь, пожалуйста?
user3542456 17 апр. 2014, в 15:24
0

Почему бы вам не опубликовать скрипку, как мы используем.
WASasquatch 17 апр. 2014, в 17:07
0

Конечно вещь. Я добавил кодовую ручку вместо скрипки. Вот ссылка: codepen.io/RobbyT15/pen/otyfw
user3542456 17 апр. 2014, в 19:19
0

Кажется довольно липким в Chrome, FireFox и Opera. Вы уверены, что это не работает с вашей стороны? Вы очистили кеш? Что-то может быть странным с обработкой кеша codepends.
WASasquatch 17 апр. 2014, в 20:58

Показать ещё 6 комментариев