Question

我不想要一个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代码：

<!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>

Answer 1

只需将position: fixed;添加到您的css中的footer班级：

#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*/
}

- - - - 的更新 -----

如果您需要一个位于底部的页脚，则需要两件事：

#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>

Answer 2

将position: fixed添加到页脚类。请注意，它在某些旧版本的Internet Explorer中不起作用。 http://jsfiddle.net/kAQyK/

#footer {
    background:#000;
    border-top:1px solid #00F0FF;
    clear:both;
    height:30px;
    margin-top:-30px;
    padding:5px 0;
    width:100%;
    position: fixed;
    bottom: 0px;
    left: 0px;
}

有关如何使其在IE中运行的示例，请参阅http://tagsoup.com/cookbook/css/fixed/

Answer 3

我多年来一直有同样的问题，似乎什么都没有用，然后我意识到我在页脚下看到的空白实际上并不是空白，而是我的页脚溢出白色背景上的白色文字。我所要做的就是添加：

overflow:hidden

在我的CSS中我的页脚。

如果有人想要对我有用的解决方案，那么它与http://getbootstrap.com/2.3.2/examples/sticky-footer.html相同，但添加了溢出：隐藏

Answer 4

DISPLAY TABLE =没有JS，没有固定的高度！

适用于现代浏览器（IE 8 +） - 我在几个浏览器中对它进行了测试，这一切似乎都运行良好。

我发现了这个解决方案，因为我需要一个没有固定高度且没有JS的粘性页脚。代码如下。

说明：基本上你有一个带有2个子元素的容器div：一个包装器和一个页脚。将您需要的所有内容放在页面上（放置页脚）在包装器中。容器设置为display: table;包装器设置为display: table-row;如果将html，body和包装器设置为height: 100%，则页脚将粘贴到底部。

页脚也设置为display: table;。这是必要的，以获得子元素的边际。您还可以将页脚设置为display: table-row;这将不允许您在页脚上设置margin-top。在这种情况下，您需要使用更多嵌套元素进行创作。

解决方案： https://jsfiddle.net/0pzy0Ld1/15/

内容更多： http://jantimon.nl/playground/footer_table.html

/* THIS IS THE MAGIC */

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
body {
  margin: 0;
  padding: 0;
}
html,
body,
#container,
#wrapper {
  height: 100%;
}
#container,
#wrapper,
#footer {
  width: 100%;
}
#container,
#footer {
  display: table;
}
#wrapper {
  display: table-row;
}
/* THIS IS JUST DECORATIVE STYLING */

html {
  font-family: sans-serif;
}
#header,
#footer {
  text-align: center;
  background: black;
  color: white;
}
#header {
  padding: 1em;
}
#content {
  background: orange;
  padding: 1em;
}
#footer {
  margin-top: 1em; /* only possible if footer has display: table !*/
}

<div id="container">
  <div id="wrapper">
    <div id="header">
      HEADER
    </div>
    <div id="content">
      CONTENT
      <br>
      <br>some more content
      <br>
      <br>even more content
    </div>
  </div>
  <div id="footer">
    <p>
      FOOTER
    </p>
    <br>
    <br>
    <p>
      MORE FOOTER
    </p>
  </div>
</div>

CSS粘滞页脚边距

4 个答案: