Как вставить нижний колонтитул в css?

у меня возникла классическая проблема для позиционирования нижнего колонтитула в нижней части браузера. Я пробовал методы, включая http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ но не к хорошему результату: мой нижний колонтитул всегда появляется в середине окна браузера как в FF, так и в IE.

в HTML я получил эту простую конструкцию

<form>
 ...
 <div class=Main />
 <div id=Footer />
</form>

вот код css, который имеет отношение к нижнему колонтитулу css проблема:

    *
    {
        margin: 0;
    }


html, body
{
    height: 100%;
}


    #Footer
    {
        background-color: #004669;
        font-family: Tahoma, Arial;
        font-size: 0.7em;
        color: White;
        position: relative;
        height: 4em;
    }



    .Main
    {
        position:relative;
        min-height:100%;
        height:auto !important;
        height:100%;

        /*top: 50px;*/

        margin: 0 25% -4em 25%;

        font-family: Verdana, Arial, Tahoma, Times New Roman;
        font-size: 0.8em;
        word-spacing: 1px;
        line-height: 170%;
        /*padding-bottom: 40px;*/
    }

где я делаю не так? Я действительно все перепробовал. Если я пропустил какую-либо полезную информацию, пожалуйста, дайте мне знать.

Спасибо за любое предложение заранее.

С уважением,

спасибо всем за ваши ответы. он работал с:

position:absolute;
    width:100%;
    bottom:0px;

положение установки:исправлено не работает в IE по какой-то причине(все еще показывал нижний колонтитул в середине браузера), работал только для FF.

36
css sticky-footer

9 ответов

попробуйте установить стили нижнего колонтитула в position:absolute; и bottom:0;.

41
#Footer {
  position:fixed;
  bottom:0;
}

что сделает футер остаются в нижней части окна браузера, независимо от того, где вы прокрутите.

22
#Footer {
position:fixed;
bottom:0;
width:100%;
}

работал для меня

9

Я думаю, что многие люди ищут нижний колонтитул внизу, который прокручивается вместо того, чтобы быть исправленным, называется липким нижним колонтитулом. Фиксированные нижние колонтитулы будут покрывать содержание тела, когда высота слишком коротка. Вы должны установить HTML, тело и контейнер страницы на высоту 100%, установите нижний колонтитул в абсолютное положение внизу. Для работы контейнера содержимого страницы необходимо относительное положение. Нижний колонтитул имеет отрицательное поле, равное высоте нижнего колонтитула минус нижнее поле содержимого страницы. Увидеть пример страницы, которую я опубликовал.

пример с примечаниями:http://markbokil.com/code/bottomfooter/

3
#footer{
position: fixed; 
bottom: 0;
}

http://codepen.io/smarty_tech/pen/grzMZr

2

это сработало для меня:

.footer
{
  width: 100%;
  bottom: 0;
  clear: both;
}
1

Если вы используете " position: fixed; bottom: 0;" ваш нижний колонтитул всегда будет отображаться внизу и будет скрывать ваше содержимое, если страница длиннее окна браузера.

0

следующее свойство css сделает это

position: fixed;

Я надеюсь, что это поможет.

0

У меня была аналогичная проблема с этим липким учебником нижнего колонтитула. Если память служит, вам нужно поместить теги формы в свой div class=Main /> раздел, так как сам тег формы вызывает проблемы с линейкой.

-1