html - 如何使用 css 正确定位页脚？

Question

希望我的页脚到达页面末尾时能得到一些帮助..

这个问题似乎被问了很多，但我不想要一个粘性页脚(位置:固定)，它挡住了我的其他内容。它和页面末端之间有一个微小的间隙。

FIDDLE

HTML

<!-- Start Navigation Bar -->
<nav id="nav_container">
    <ul id="navigation">
        <li><a href="#about">About</a>
        </li>
        <li><a href="#experience">Experience</a>
        </li>
        <li><a href="#projects">Projects</a>
        </li>
        <li><a href="#skills">Skills</a>
        </li>
        <li><a href="#education">Education</a>
        </li>
        <li><a href="#contact">Contact</a>
        </li>
    </ul>
</nav>

<!-- Start Body Container -->
<div id="container">

</div>
<!-- End Body Container -->

<!-- Start Footer -->
<footer id="footer_container">
    <ul id="footer">
        <li>
            <p>Created by Name</p>
        </li>
        <li><a href="#about"><p>Back To Top.</p></a>
        </li>
    </ul>
</footer>

CSS

/****************************************************/

/* HEADER */

/****************************************************/
 #nav_container {
    position:fixed;
    width:100%;
    background-color:#222222;
    text-align:center;
}
#nav_container #navigation {
    padding-top:45px;
    padding-bottom:20px;
}
#nav_container #navigation li {
    display:inline-block;
    padding-right:10px;
    margin-left:20px;
    font: 400 16px/20px'Bree Serif', Georgia, serif;
}
/****************************************************/

/* PAGE CONTAINER */

/****************************************************/
 #container {
    width:850px;
    margin:0px auto 300px auto;
    overflow:auto;
}
/****************************************************/

/* FOOTER SECTION */

/****************************************************/
 #footer {
    position:relative;
    width:auto;
    background-color:#222222;
    text-align:center;
    padding-top:20px;
    bottom:15px;
}
#footer li {
    display:block;
    padding-right:10px;
    margin-left:20px;
    font: 400 16px/20px'Bree Serif', Georgia, serif;
    color:#FFFFFF;
}

Answer 1

将背景颜色放在页脚上，而不是#footer。我还添加了一个 html5 css 重置。这是一个工作链接

http://jsfiddle.net/DrJkY/1/

http://jsfiddle.net/DrJkY/2/

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}
body {
    background:#FFFFFF url(bower_components/todomvc-common/bg.png);
    margin:0px;
    font: 400 12px/22px'Open Sans', Verdana, Helvetica, sans-serif;
    color:#6a6969;
}
h1 {
    font: 400 58px/60px'Bree Serif', Georgia, serif;
    color:#222222;
}
h2 {
    font: 400 18px/22px'Bree Serif', Georgia, serif;
    color:#6a6969;
}
h3 {
    font: 400 14px/16px'Bree Serif', Georgia, serif;
    color:#6a6969;
}
a {
    text-decoration:none;
    color:#FFFFFF;
}
a:hover {
    color:#18B747;
}
/****************************************************/

/* HEADER */

/****************************************************/
 #nav_container {
    position:fixed;
    width:100%;
    background-color:#222222;
    text-align:center;
}
#nav_container #navigation {
    padding-top:45px;
    padding-bottom:20px;
}
#nav_container #navigation li {
    display:inline-block;
    padding-right:10px;
    margin-left:20px;
    font: 400 16px/20px'Bree Serif', Georgia, serif;
}
/****************************************************/

/* PAGE CONTAINER */

/****************************************************/
 #container {
    width:850px;
    margin:0px auto 300px auto;
}
/****************************************************/

/* ABOUT SECTION */

/****************************************************/
 #about {
    padding-top:115px;
}
#about #ab_container {
    float:left;
}
#about #ab_container img {
    float:left;
}
/****************************************************/

/* EXPERIENCE SECTION */

/****************************************************/
 #experience {
    padding-top:115px;
}
#experience #exp_container {
    float:left;
}
#experience #exp_container img {
    float:left;
}
/****************************************************/

/* PROJECTS SECTION */

/****************************************************/
 #projects {
    padding-top:115px;
}
#projects #proj_container {
    float:left;
}
#projects #proj_container img {
    float:left;
}
/****************************************************/

/* SKILLS SECTION */

/****************************************************/
 #skills {
    padding-top:115px;
}
#skills #sk_container {
    float:left;
}
/****************************************************/

/* EDUCATION SECTION */

/****************************************************/
 #education {
    padding-top:115px;
}
#education #edu_container {
    float:left;
}
#education #edu_container img {
    float:left;
}
/****************************************************/

/* CONTACT SECTION */

/****************************************************/
 #contact {
    padding-top:115px;
}
#contact #con_container {
    float:left;
}
/****************************************************/

/* FOOTER SECTION */

/****************************************************/
 #footer {
    position:relative;
    width:auto;
    text-align:center;
    padding-top:20px;
    bottom:15px;
}
#footer li {
    display:block;
    padding-right:10px;
    margin-left:20px;
    font: 400 16px/20px'Bree Serif', Georgia, serif;
    color:#FFFFFF;
}
footer {background-color:#222222;}