如何用css正確定位頁腳？

希望我能得到一些幫助，我的頁腳到達頁面的末尾..如何用css正確定位頁腳？

這個問題似乎問了很多，但我不希望粘頁腳（位置：固定的），它阻擋了我的其他內容。它和頁面之間有一個微小的差距。

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; 
}

來源

2014-02-09 tom

我，嘲笑標題，可能被編輯，但什麼是地獄，它讓我笑:) – DannyG

請不要在SO上使用垃圾標題，這不是Reddit或你有什麼。 – Nit

@Nit謝謝尼特！我的標題與描述性和唯一性一樣..'Nit.EnablePartyPooperMode（）' – tom

把背景顏色頁腳不#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;}

來源

2014-02-09 02:52:43

恕我直言，'* {margin：0; padding：0;}'是一個壞主意，並且可能會導致很多副作用。我沒有閱讀你的答案，但你可能想考慮刪除它或使它更具體... – Carpetsmoker

是的'* {margin：0; padding：0;}'使我所有其他的身體內容都有一個滾動條。 – tom

在#container中刪除溢出：auto;我會更新css –

開始： '#footer的'（行140）在CSS上小提琴已經bottom: 15px;（線146），這將推動由於它具有position: relative，所以從底部向上看15px。

此外，圍繞「返回頂部」的p標記從瀏覽器應用了margin-bottom。拿出p標籤，或者直接定位它，並在其位置上填充該邊距/使用填充。

最後需要考慮的：如果你把包含元素的背景黑色爲好，它會匹配頁腳「赤膊上陣」的差距......

來源

2014-02-09 03:00:48 danwarfel

如何用css正確定位頁腳？

回答

相關問題