Как вставить элемент <footer> в нижней части страницы (HTML5 и CSS3)?

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

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

Когда есть много контента, мы можем видеть нижний колонтитул на первой странице, а когда контента немного, мы увидим внизу.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        html,body {
            padding: 0;
            margin: 0;
        }

        header {
            position:fixed;
            top:0;
            width:100%;
            height:40px;
            background-color:#333;
            padding:20px;
        }

        footer {
            background-color: #333;
            width: 100%;
            bottom: 0;
            position: relative;
        }
        #main{
            padding-top:100px;
            text-align:center;
        }
  </style>
</head>
<body>
    <header>
    header
    </header>

    <div id="main">
    main
    </div>

    <footer>
    footer
    </footer>
</body>
</html>

Ответы

Ответ 1

Для перехода нижнего колонтитула от position: relative; до position:fixed;

 footer {
            background-color: #333;
            width: 100%;
            bottom: 0;
            position: fixed;
        }

Пример: http://jsfiddle.net/a6RBm/

Ответ 2

Вот пример использования css3:

CSS

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

HTML:

<div id="wrap">
    body content....
</div>
<footer class="footer">
    footer content....
</footer>

jsfiddle

Обновление
Как указал Мартин, "position: relative" не является обязательным для элемента .footer, то же самое для clear:both. Эти свойства присутствуют только в качестве примера. Итак, минимальный css, необходимый для закрепления нижнего колонтитула внизу, должен быть:

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}

Кроме того, в css-трюках есть отличная статья, показывающая разные способы сделать это: https://css-tricks.com/couple-takes-sticky-footer/

Ответ 3

Я бы использовал это в HTML 5... Just sayin

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}

Ответ 4

просто установите position: fixed в элемент нижнего колонтитула (вместо относительного)

Пример Jsbin

Обратите внимание, что вам может потребоваться также установить элемент margin-bottom в элемент main, по крайней мере равный высоте элемента нижнего колонтитула (например, margin-bottom: 1.5em;), в противном случае в некоторых проходах нижняя область основного содержимого может частично перекрываться нижним колонтитулом