如何在CSS / HTML中获得页脚？

Question

I have used this guys guide.

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

however my footer just sits in the middle of the page and not the full width across the page.

Can anybody help please.

Here's the CSS.

body {
background: url(images/topbg.png) repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
color:#000;
margin:0;
padding:0;
height:100%;
}


h1 {
font-size:100px;
color:#FFF; 
line-height: 10%;
font-family: 'Exo', sans-serif;
}

h2 {
font-size:100px;
color: #18942f; 
line-height: 80%;
font-family: 'Exo', sans-serif;
}

h3 {
font-size: 20px;    
}

.page-container {

width: 960px;
margin-bottom: auto; 
margin-left: auto; 
margin-right: auto;
min-height:100%;
position:relative;

}

.top-nav ul {
margin: 0;
list-style: none;
line-height: normal;
}

.top-nav li {
margin-left: 220px;
}

.top-nav a {
display: block;
float: left;
height: 38px;
margin-right: 1px;
padding: 4px 30px 0 30px;
text-decoration: none;
font-size: 34px;
font-weight: bold;
font-family: 'Exo', sans-serif;
color: #FFF;
}

.top-nav a:hover {
background:  #272727;
color: #18942f;
}

.top-nav .current_page_item a {
background:  #252525;
color: #FFF;
}

#name {
float: left;
margin-top: 70px;
}

#badge {
float:right;
margin-right: 100px;
margin-top: 10px;

}
.info {
clear: both;
padding-bottom:60px;
}

#about {
height: 250px;
width: 300px;
float:left;
}

#about2 {
width: 860px;   
}

#skills {
height: 250px;
width: 300px;
float: left;
text-align: center; 
}

#contact {
height: 250px;
width: 300px;
float: left;
text-align: right;
}

.about3 {
float:left;
width: 500px;   
}
.picture1 {
margin-left: 560px;
padding-top: 25px;
}
.about4 {
width:450px;

}

.footer {

background: url(images/footer.png)repeat-x;
position:absolute;
bottom:0;
width:100%;
height:60px;
}

.footer-links {
font-family:'Exo', sans-serif;
color: #FFF;
font-size:26px;
padding-top: 50px;
text-align:center   
}

And here's the HTML

<div class="page-container">
<div class="top-nav"> 
  <ul> 
    <li class="current_page_item"><a href="#">Home</a></li> 
    <li><a href="aboutme.html" class="links">About Me</a></li> 
    <li><a href="skills.html" class="links">Skills</a></li> 
    <li><a href="contact.php" class="links">Contact</a></li> 
  </ul> 
</div>
<div id="name"><h1>My</h1>
  <h2>Name</h2></div>
  <div id="badge"><img src="images/webbadge.png" alt="" width="310" height="310" /></div>
  <div class="info">
  <div id = "about"> </div>
   <div id = "skills"> </div>
  <div id = "contact"></div>

<div class ="footer">
<div class ="footer-links">

<a href="#" style="color:#FFF">Home </a> -

<a href="#" style="color:#FFF">About</a> -

<a href="#" style="color:#FFF">#</a> -

<a href="#" style="color:#FFF">#</a>
</div>
</div>
</div>

Answer 1

<style>
 .footer
{
   position:fixed;
   bottom:0px;
   z-index:2;
   width:100%;
   padding:5px;
}
</style>

just as simple as that?

Answer 2

This one works pretty well, and has been tested across multiple browsers. Offers the basic CSS/HTML to get you started, and a decent manual

http://www.cssstickyfooter.com/

Answer 3

This should be :

.footer {
background: url(images/footer.png)repeat-x;
width:100%;
height:60px;
}

or:

.footer {
background: url(images/footer.png)repeat-x;
position:absolute;
top:{TOP}px;
width:100%;
height:60px;
}

With playing with {TOP} to fix the footer where you want.

Answer 4

I did a bit of clean up on your code, this is how I would tackle the problem:

http://jsfiddle.net/hPWVk/

HTML

    <div class="page-container">

        <div class="top-nav"> 
            <ul> 
                <li class="current_page_item"><a href="#">Home</a></li> 
                <li><a href="aboutme.html" class="links">About Me</a></li> 
                <li><a href="skills.html" class="links">Skills</a></li> 
                <li><a href="contact.php" class="links">Contact</a></li> 
            </ul> 
        </div>

        <div class="content">

            <div id="name">
                <h1>My</h1>
                <h2>Name</h2>
            </div>

            <div id="badge"><img src="images/webbadge.png" alt="" /></div>

            <div class="info">
                <div id = "about"></div>
                <div id = "skills"></div>
                <div id = "contact"></div>

            </div>

        </div>

        <div class ="footer">
            <div class ="footer-links">
                <a href="#" style="color:#FFF">Home </a> -
                <a href="#" style="color:#FFF">About</a> -
                <a href="#" style="color:#FFF">#</a> -
                <a href="#" style="color:#FFF">#</a>
            </div>
        </div>

    </div>

</body>

CSS

body {
background:orange url(images/topbg.png) repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
color:#000;
margin:0;
padding:0;
height:100%;
}


h1 {
font-size:100px;
color:#FFF; 
line-height: 10%;
font-family: 'Exo', sans-serif;
}

h2 {
font-size:100px;
color: #18942f; 
line-height: 80%;
font-family: 'Exo', sans-serif;
}

h3 {
font-size: 20px;    
}

.page-container {

width: 960px;
margin-bottom: auto; 
margin-left: auto; 
margin-right: auto;
min-height:100%;
position:relative;

}

.top-nav
{
   overflow:hidden; 
}

.top-nav ul {
margin: 0;
list-style: none;
line-height: normal;
}

.top-nav li {
margin-left: 220px;
}

.top-nav a {
display: block;
float: left;
height: 38px;
margin-right: 1px;
padding: 4px 30px 0 30px;
text-decoration: none;
font-size: 34px;
font-weight: bold;
font-family: 'Exo', sans-serif;
color: #FFF;
}

.top-nav a:hover {
background:  #272727;
color: #18942f;
}

.top-nav .current_page_item a {
background:  #252525;
color: #FFF;
}


.content { overflow:hidden; }

#name {
float: left;
margin-top: 70px;
}

#badge {
float:right;
margin-right: 100px;
margin-top: 10px;

}

#badge img { width:50pxl height:50px; }

.info {
overflow:hidden;
padding-bottom:60px;
}

#about {
height: 250px;
width: 300px;
float:left;
}

#about2 {
width: 860px;   
}

#skills {
height: 250px;
width: 300px;
float: left;
text-align: center; 
}

#contact {
height: 250px;
width: 300px;
float: left;
text-align: right;
}

.about3 {
float:left;
width: 500px;   
}
.picture1 {
margin-left: 560px;
padding-top: 25px;
}
.about4 {
width:450px;

}

.footer {

background: url(images/footer.png)repeat-x;
position:fixed;
bottom:60px;
width:100%;
height:60px;
}

.footer-links {
font-family:'Exo', sans-serif;
color: #FFF;
font-size:26px;
padding-top: 50px;
text-align:center   
}​