Как вставить нижний колонтитул в 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.

Ответ 1

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

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

Я думаю, что многие люди ищут нижний колонтитул внизу, который прокручивается, а не фиксируется, называется липким нижним колонтитулом. Исправленные нижние колонтитулы будут охватывать содержание тела, когда высота слишком коротка. Вы должны установить html, body и page container на высоту 100%, установите нижний колонтитул в положение абсолютного положения. Контент для содержимого страницы требует относительной позиции для работы. Нижний колонтитул имеет отрицательный запас, равный высоте нижнего колонтитула минус нижний край содержимого страницы. См. Страницу с примером, которую я опубликовал.

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

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

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

Ответ 8

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

position: fixed;

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

Ответ 9

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