1
我已经通过了以前回答的问题的无数方法。我相信我遵循这个（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
你的小提琴的作品。有什么问题？它只是一个特定的浏览器？ – Turnip 2014-09-19 16:30:23
页脚停留在小提琴内部的底部。 – 2014-09-19 16:30:53
@ 3rror404这很奇怪。我使用grunt服务器来查看我的谷歌浏览器上的代码，它并没有停留在底部查看它 – 2014-09-19 16:34:20