Я знаю, что это спросили много времен в прошлом, но ни за что в жизни я, может казаться, не получаю ни одного из других решений работать.
То, что я пытаюсь сделать, должно получить нижний колонтитул (который является изображением, которое повторяется через ширину страницы) придерживаться нижней части браузера, когда нет достаточного количества содержания для естественного продвижения его к концу страницы и когда СУЩЕСТВУЕТ достаточно содержания для продвижения его к нижней части, это делает просто это. Примером является тот по 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 и т.п. (это могло быть то, почему ни одна из работы решений?).
Если бы кто-либо мог бы дать мне какую-либо справку или руководство, я был бы soooooo благодарный.
Это источник, который помог мне создать такой макет:
http://www.jaydepro.com/blog/post/Frameless-page -header-and-footer-using-CSS.aspx