創建留在頁面底部的頁腳

我已經通過了以前回答的問題的無數方法。我相信我遵循這個（http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/）的t，但我仍然無法讓我的頁腳留在頁面的底部。我知道這已被問過無數次，但我沒有在哪裏調整我的代碼。任何幫助，這將不勝感激。創建留在頁面底部的頁腳

這裏是我的代碼：

HTML

<body> 
    <div id="wrapper"> 
     <header> 
      <div class="logo"><a href="index.html"><img src="http://i.imgur.com/eWLyoIY.png"/></a></div> 
      <div class="chapter-logo"><a><img src="http://i.imgur.com/RPIvgdD.png"/></a></div> 
     </header> 
     <nav> 
      <ul class="menu"> 
       <li><a href="index.html">Home</a> 

       <li class="dropdown"><a href="">About ▾</a> 
        <ul class = "sub-menu"> 
         <li><a href="history.html">History</a> 
         </li> 
         <li><a href="brothers.html">Brothers</a> 
         </li> 
        </ul> 
       <li class = "dropdown"><a href="">Philanthropy ▾</a> 
        <ul class="sub-menu"> 
         <li><a href="kovacs.html">Kovacs Color Run</a> 
         </li> 
         <li><a href="greekgod.html">Greek God</a> 
         </li> 
        </ul> 

       <li><a href="membership.html">Membership</a> 
       <li><a href="contact.html">Contact</a> 

      </ul> 
     </nav> 


<div class="index"> 
    <div class ="letter"> 
     <p><b><br>Welcome to the official website for the New York Iota chapter of Phi Kappa Psi at Binghamton 

University! Here you will be able to learn about us, and get a brief introduction to Greek Life at 

Binghamton. If you have any questions or simply want to learn more information, feel free contact us at 

any time.</b></br> 

     <br><b><font color ="#22674A">Carl Hashem (Chapter President)</b></font></br> 
    </div> 
</div> 
<div class = "news-section"> 
<table class ="news"> 
    <tr> 
    <td class ="social"> 
     <h4 align="center">Connect</h4> 
     <a href ="http://instagram.com/phipsibing"><img src="http://i.imgur.com/1GhbSOj.png"/></a> 
     <a href="https://twitter.com/phi_psi_bing"><img src="http://i.imgur.com/oawoJtC.png"/></a> 
     <a href="https://www.facebook.com/phipsi.sociallist?fref=ts"><img src="http://i.imgur.com/2dAtAX3.png"/></a> 
    </td> 

    <td class = "greekgod"> 
     <h4 align = "center">Greek God</h4> 
     <p align="center">On October 18th 2014, brother Anthony Leighton will be representing us in this years Greek God competition. All proceeds go to the Elizabeth Glazier Pediatric Aids Foundation.</p> 

     <a href="https://www.payitsquare.com/collect-page/46106"><div class="donate-button"> 
     <p>Donate!</p> 
     </div></a> 

    </td> 

    <td class = "kovacs"> 
     <h4 align="center">Kovacs Color Run</h4> 
     <p align="center">The 5th Annual Steve Kovacs Color Run will take place on October 19th 2014. All proceeds are split between the Fairview Recovery Center and Childhood Development Center.</p> 
     <a href="https://www.payitsquare.com/collect-page/41430"><div class="sign-up"> 
     <p>Sign Up!</p> 
     </div></a> 
    </td> 
</tr> 
</table> 
</div> 
    <div class = "footer"> 
     <p>© Phi Kappa Psi NY Iota Chapter. All Rights Reserved.</p> 
    </div> 
</div> 
</body>

CSS

html { 
    height:100%; 
    margin:0; 
    padding:0; 
} 
#wrapper { 
    min-width:1000px; 
    min-height:100%; 
    position:relative; 
} 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 

header { 
    height:100px; 
    width:100%; 
    background:black; 
    margin:0 auto; 

} 

.logo{ 
    padding-left:10px; 
    float:left; 
    padding-top:5px; 
} 

.chapter-logo { 
    float:right; 
    padding-top:15px; 
    padding-right:10px; 
} 

/* Start MENU styling*/ 

.menu{ 
    margin:0 auto; 
    padding:0 ; 
    text-align:center; 
    clear:both 
} 

ul.menu { 
    background-image: -o-linear-gradient(bottom, #ACB5B5 0%, #E2F0EA 100%); 
    background-image: -moz-linear-gradient(bottom, #ACB5B5 0%, #E2F0EA 100%); 
    background-image: -webkit-linear-gradient(bottom, #ACB5B5 0%, #E2F0EA 100%); 
    background-image: -ms-linear-gradient(bottom, #ACB5B5 0%, #E2F0EA 100%); 
    background-image: linear-gradient(to bottom, #ACB5B5 0%, #E2F0EA 100%); 
    height: 40px; 
    width: 100%; 
    border-left:solid 1px #22674A; 
    white-space: nowrap; 
    text-align:center; 
} 

ul.menu > li { 
    position: relative; 
    display:inline-block; 
    list-style:none; 
    text-align:center; 
    width:20%; 
    border-style:1px #22674A; 
    font-family: "Open Sans", sans-serif; 
    font-weight:700; 
} 

/*sub menu styling*/ 

ul.menu li:first-child a { 
    border-left:none; 
} 

ul.menu ul li:first-child { 
    border-bottom:solid 1px #22674A; 
} 

ul.menu ul li:nth-child(2) { 
    border-bottom:solid 1px #22674A; 
} 

ul.menu ul li:last-child{ 
    border-bottom:none; 
} 

ul.menu ul li a { 
    border:none; 
} 
ul.menu ul { 
    background-image: -o-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%); 
    background-image: -moz-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%); 
    background-image: -webkit-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%); 
    background-image: -ms-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%); 
    background-image: linear-gradient(to bottom, #E2F0EA 0%, #ACB5B5 100%); 
    position: absolute; 
    padding:0; 
    border-left:none; 
    border:solid 1px #22674A; 
    width:100%; 
    text-align:center; 
    display:none; 

} 
ul.menu a { 
    cursor: pointer; 
    display: block; 
    color: #22674A; 
    line-height: 40px; 
    text-decoration:none; 
    font-weight:bold; 
    border-left:solid 1px #22674A; 
} 
ul.menu li { 
    list-style: none; 
} 

/* End MENU styling */ 
/* Banner Styling*/ 
.index { 
    height:400px; 
    background-image: url("http://i.imgur.com/RI05og7.jpg"); 
    background-repeat:no-repeat; 
    background-size:100% 400px; 
} 

.letter{ 
    width:460px; 
    height:250px; 
    margin-left:20px; 
    line-height:1.75em; 
    font-family:"Open Sans", sans-serif 
} 

h4 { 
    color:#22674A; 
    font-family:"Open Sans", sans-serif; 
    font-weight:700; 
} 

/*End of Banner Styling*/ 

/*News Styling*/ 

.news { 
    width:1000px; 
} 

.news-section { 
    padding-bottom:50px; 
} 
.greekgod { 
    width:300px; 
    height:220px; 
    border:solid 1px black; 
    text-align:center; 
    background-image: -o-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%); 
    background-image: -moz-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%); 
    background-image: -webkit-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%); 
    background-image: -ms-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%); 
    background-image: linear-gradient(to bottom, #E2F0EA 0%, #ACB5B5 100%); 
    padding:5px 5px 5px 5px; 
    line-height:1.5em; 
    font-family:"Open Sans", sans-serif; 
    float:left; 
    margin-right:30px; 
} 

.donate-button { 
    width:150px; 
    height:40px; 
    border:3px solid black; 
    background:#22674A; 
    border-radius:5px; 
    color:white; 
    text-align:center; 
    padding-top:7px; 
    text-decoration:none; 
    margin-left:65px; 
    margin-bottom:10px; 
    font-family:"Open Sans", sans-serif 
} 

.kovacs { 
    width:300px; 
    height:220px; 
    border:solid 1px black; 
    float:left; 
    background-image: -o-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%); 
    background-image: -moz-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%); 
    background-image: -webkit-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%); 
    background-image: -ms-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%); 
    background-image: linear-gradient(to bottom, #E2F0EA 0%, #ACB5B5 100%); 
    text-align:center; 
    margin: 0 auto; 
    line-height:1.5em; 
    padding:5px; 
    padding-bottom:10px; 
    font-family:"Open Sans", sans-serif 
} 

.sign-up { 
    width:150px; 
    height:40px; 
    border:3px solid black; 
    background:#22674A; 
    border-radius:5px; 
    color:white; 
    text-align:center; 
    padding-top:7px; 
    text-decoration:none; 
    margin-left:65px; 
    font-family:"Open Sans", sans-serif 
} 

.social{ 
    float:left; 
    border:solid 1px black; 
    position:relative; 
    text-align:center; 
    width:300px; 
    height:220px; 
    margin-right:30px; 
    background-image: -o-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%); 
    background-image: -moz-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%); 
    background-image: -webkit-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%); 
    background-image: -ms-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%); 
    background-image: linear-gradient(to bottom, #E2F0EA 0%, #ACB5B5 100%); 
    padding:5px; 
    font-family:"Open Sans", sans-serif 

} 

.social a { 
    padding:20px; 
} 

.social h4 { 
    padding-bottom:20px; 
    padding-top:none; 

} 

.footer { 
height:50px; 
width:100%; 
position:absolute; 
background-color:black; 
bottom:0; 
left:0; 
} 

.footer p { 
    text-align:center; 
    color:white; 
    font-size:13px; 
    font-family:"Open Sans", sans-serif; 
    padding-top:15px; 
}

FIDDLE

http://jsfiddle.net/18468f07/

來源

2014-09-19 Leonard Labita

你的小提琴的作品。有什麼問題？它只是一個特定的瀏覽器？ – Turnip 2014-09-19 16:30:23

頁腳停留在小提琴內部的底部。 – 2014-09-19 16:30:53

@ 3rror404這很奇怪。我使用grunt服務器來查看我的谷歌瀏覽器上的代碼，它並沒有停留在底部查看它 – 2014-09-19 16:34:20

嘗試改變你的佈局我檢查過它，可能導致它。試試這個，而不是移動包裝div的頁腳div，使它們在同一個標簽上

你也可以使用position：fixed使它粘在你想要的位置。

<div id="wrapper"> 
</div> 
<div class = "footer"> 
      <p>© Phi Kappa Psi NY Iota Chapter. All Rights  Reserved.</p> 
</div>

並在CSS

Div#wrapper { 
margin-bottom: 50px; 
}

這應該解決這個問題。

對不起，在這裏不能使用手機格式。

來源

2014-09-19 17:00:54 andrex

這工作完美。現在我已將它固定在底部，我如何使它不會超出我的內容並與其重疊？ – 2014-09-19 17:16:24

您是否使用固定位置？如果是這樣，重疊其他元素，因爲它是posititiom相對於屏幕尺寸我猜不太確定這部分。 – andrex 2014-09-19 17:17:44

你可以底部填充，增加了#wrapper元素，以便填充將包含頁腳的高度和上元素之間的一些空間。這就是如果你不想改變當前的結構。

來源

2014-09-19 16:35:55 Luigi

創建留在頁面底部的頁腳

回答

相關問題