Question

我使用过这个家伙指南。

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

但是我的页脚只是位于页面的中间而不是页面的整个宽度。

请有人帮忙吗？

这是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   
}

这是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>

就这么简单？

Answer 2

这个很好用，并且已在多个浏览器中进行过测试。提供基本的CSS / HTML以帮助您入门，并提供体面的手册

http://www.cssstickyfooter.com/

Answer 3

这应该是：

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

或：

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

使用{TOP}将页脚固定在您想要的位置。

Answer 4

我对你的代码做了一些清理工作，这就是解决这个问题的方法：

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   
}

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

4 个答案: