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

Question

Я знаю, что об этом спрашивали много раз в прошлом, но, судя по всему, я не могу заставить работать другие решения.

То, что я пытаюсь сделать, это заставить нижний колонтитул (который повторяется по всей ширине страницы) придерживаться нижней части браузера, когда не хватает контента, чтобы естественным образом выдвинуть его нижней части страницы, и когда есть достаточно контента, чтобы подтолкнуть его вниз, он делает именно это. Примером является http://www.themaninblue.com/experiment/footerStickAlt/good_example_short.htm, который делает именно то, что я хочу, но я тоже не могу работать.

Код, который я сейчас реализовал, заставляет нижний колонтитул придерживаться определенного раздела страницы с текстом, идущим под ним. Вы можете увидеть его на sourcectrl.co.uk, но его не так много. Вот код для вашего удовольствия от просмотра.

html, body {
font: 100% Arial, Helvetica, sans-serif;
height: 100%;
color: #597347;
margin: 0;
padding: 0;
background: #573909;
}

header {
    display: block;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 66px;
    background: url(../images/FillerPage_01.gif) repeat-x left bottom;
}

section {
    width: 940px;
    margin: 0 auto;
    font-size: 1.4em;
    overflow: auto;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-bottom: 87px;
    position: relative;
    padding-bottom: 90px;
}

footer {
    display:block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 87px;
    background: url(../images/FillerPage_08.gif) repeat-x left bottom;
}

Извините, если это кажется грязным! Я просто хотел бы знать, направляюсь ли я в правильном направлении или есть что-то, чего я просто не получаю? О да, я пытаюсь сделать все это с помощью разметки html 5, поэтому нет #footer и т. П. (Может быть, поэтому ни одно из решений не работает?).

Если бы кто-нибудь мог дать мне какую-либо помощь или руководство, я был бы оооочень благодарен.

Answer 1

Я считаю, что код, который вы ищете, находится здесь:

http://www.themaninblue.com/writing/perspective/2005/08/29/

Я реализовал это только сейчас на моем сайте, и он отлично работает!

прошло много времени с тех пор, как вы задали свой вопрос, но, надеюсь, это поможет!

Answer 2

Это источник, который помог мне достичь такой раскладки:

http://www.jaydepro.com/blog/post/Frameless-page-header-and-footer-using-CSS.aspx

Answer 3

Поместите все в Main в оболочке и используйте следующий код:

html, body, form
{
    height: 100%;
}

#wrapper
{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -80px;   (-80px will be different for you, usually the same as the footer but negative but mine is different)
}

#footer, .push
{
    height: 60px;   (This is just the height of MY footer, change this to whatever size your footer is)
}