CSS粘滞页脚边距 [英] CSS Sticky Footer Margin

查看：170
本文介绍了CSS粘滞页脚边距的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我不想要一个FIXED页脚，我需要一个STICKY页脚。



我的粘帖页首效果很好，



尝试混淆浏览器高度和内容div高度，您应该看到在哪里问题是。



在页脚和页面底部之间留下一个难看的页边距。



谢谢

CSS 



  html，body {
 height：100％; 
 margin：0; 
} 
 body {
 color：#FFF; 
 font：16px Tahoma，sans-serif; 
 text-align：center; 
} 
 a {
 text-decoration：none; 
} 
 #wrapper {
 height：100％; 
 margin：0 auto; 
 min-height：100％; 
 padding-bottom：-30px; 
 width：985px; 
} 
 #content {
 background：＃F00; 
 height：950px; 
} 
 #footer {
 background：＃000; 
 border-top：1px Solid＃00F0FF; 
 clear：both; 
 height：30px; 
 margin-top：-30px; 
 padding：5px 0; 
 width：100％; 
} 
 #footer span {
 color：#FFF; 
 font-size：16px 
 padding-right：10px; 
} 
 #push {
 clear：both; 
 height：30px; 
}

HTML代码：
$ b 

 <！DOCTYPE HTML> 
< html> 
< head> 
< title>错误页脚< / title> 
< link rel =stylesheethref =badfooter.csstype =text / css> 
< / head> 
< body> 
< div id =wrapper> 
< div id =content> 
< span>当您向下滚动时，页脚在底部留下额外的空间。它只从底部开始，只有折叠部分部分（在将其滚动到底部之前）。< / span> 
< / div> 
< div id =push>< / div> 
< / div> 
< div id =footer> 
< a href =>< span>关于我们< / span>< / a> 
< span> | < / span> 
< a href =>< span>与我们联系< / span>< / a> 
< span> | < / span> 
< a href =>< span>首页< / span>< / a> 
< / div> 
< / body>

解决方案>

只需在您的css中的 footer 类中添加 position：fixed; ：

  #footer {
 background：＃000; 
 border-top：1px solid＃00F0FF; 
 clear：both; 
 height：30px; 
 margin-top：-30px; 
 padding：5px 0; 
 width：100％; 
 position：fixed; / *添加此新属性* / 
}

UPDATE -----



如果您需要一个位于底部的页脚，您需要两个东西：

  #wrapper {
 / * height：100％; * / / *你需要注释这个高度* / 
 margin：0 auto; 
 min-height：100％; 
 padding-bottom：-30px; 
 width：985px; 
 position：relative; / *，你需要添加这个* / 
} 
 
 #footer {
 background：＃000; 
 border-top：1px solid＃00F0FF; 
 height：30px; 
 margin-top：-30px; 
 padding：5px 0; 
 width：100％; 
 position：relative; / *使用相对位置* / 
} 
  

 

 < div id =wrapper> < div id =content> < span>当您向下滚动时，页脚在底部留下额外的空间。它只从底部开始，只有折叠部分部分（在将其滚动到底部之前）。< / span> < / div> < div id =push>< / div>< / div>< div id =footer> < a href =>< span>关于我们< / span>< / a> < span> | < / span> < a href =>< span>与我们联系< / span>< / a> < span> | < / span> < a href =>< span>首页< / span>< / a>< / div>   
I do NOT want a FIXED footer, I need a STICKY footer.



My sticky footer worked fine at first but when the content is at a certain height, there is a margin between the footer and bottom of the page.



Try messing with the browser height and content div height, and you should see where the problem is.



It leaves an awkward margin between the footer and the bottom of the page.



Thank you in advance.



CSS Code:
html, body {
    height:100%;
    margin:0;
}
body {
    color:#FFF;
    font:16px Tahoma, sans-serif;
    text-align:center;
}
a {
    text-decoration:none;
}
#wrapper {
    height:100%;
    margin:0 auto;
    min-height:100%;
    padding-bottom:-30px;
    width:985px;
}
#content {
    background:#F00;
    height:950px;
}
#footer {
    background:#000;
    border-top:1px solid #00F0FF;
    clear:both;
    height:30px;
    margin-top:-30px;
    padding:5px 0;
    width:100%;
}
#footer span {
    color:#FFF;
    font-size:16px;
    padding-right:10px;
}
#push {
    clear:both;
    height:30px;
}

HTML Code:
<!DOCTYPE HTML>
<html>
    <head>
        <title>Bad Footer</title>
        <link rel="stylesheet" href="badfooter.css" type="text/css">
</head>
<body>
    <div id="wrapper">
        <div id="content">
            <span>The footer leaves extra space at the bottom when you scroll all the way down. It starts out at the bottom for only the "Above the Fold" section (before scrolling it's at the bottom).</span>
        </div>
        <div id="push"></div>
    </div>
    <div id="footer">
        <a href=""><span>About Us</span></a>
        <span> | </span>
        <a href=""><span>Contact Us</span></a>
        <span> | </span>
        <a href=""><span>Home</span></a>
    </div>
</body>

 解决方案 
Just add position: fixed; to your footer class in your css:
#footer {
    background:#000;
    border-top:1px solid #00F0FF;
    clear:both;
    height:30px;
    margin-top:-30px;
    padding:5px 0;
    width:100%;
    position: fixed; /*add this new property*/
}

-----UPDATE-----



If you need a footer that stays at the bottom you need two things:
#wrapper {
    /*height:100%;*/   /*you need to comment this height*/
    margin:0 auto;
    min-height:100%;
    padding-bottom:-30px;
    width:985px;
    position: relative;  /*and you need to add this */
}

#footer {
    background:#000;
    border-top:1px solid #00F0FF;
    height:30px;
    margin-top:-30px;
    padding:5px 0;
    width:100%;
    position: relative;  /*use relative position*/
}





#wrapper {
  /*height:100%;*/   /*you need to comment this height*/
  margin: 0 auto;
  min-height: 100%;
  min-height: 700px;  /* only for Demo purposes */
  padding-bottom: -30px;
  width: 985px;
  position: relative;  /*and you need to add this */
}
#footer {
  background: #000;
  border-top: 1px solid #00F0FF;
  height: 30px;
  margin-top: -30px;
  padding: 5px 0;
  width: 100%;
  position: relative;  /*use relative position*/
}


<div id="wrapper">
  <div id="content">
    <span>The footer leaves extra space at the bottom when you scroll all the way down. It starts out at the bottom for only the "Above the Fold" section (before scrolling it's at the bottom).</span>
  </div>
  <div id="push"></div>
</div>
<div id="footer">
  <a href=""><span>About Us</span></a>
  <span> | </span>
  <a href=""><span>Contact Us</span></a>
  <span> | </span>
  <a href=""><span>Home</span></a>
</div>








                        
这篇关于CSS粘滞页脚边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆