CSS 粘滞页脚边距答案

【问题标题】：CSS Sticky Footer MarginCSS 粘滞页脚边距
【发布时间】：2012-08-05 18:47:58
【问题描述】：

我不想要 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>

【问题讨论】：

标签： css footer sticky

【解决方案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>

【讨论】：

将位置设置为固定不是粘性页脚...固定意味着它将始终保持在底部（尽管滚动）。另一方面，粘性页脚要复杂得多。如果有滚动，则必须滚动底部才能看到页脚，否则它会停留在底部。
JSFiddle 链接已损坏。
@Reado Code sn-p 现在已添加到答案中。

【解决方案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;
}

请参阅http://tagsoup.com/cookbook/css/fixed/ 了解如何使其在 IE 中也能工作的示例

【讨论】：

关键词：粘页脚。将位置设置为固定不是粘性页脚...固定意味着它将始终保持在底部（尽管滚动）。另一方面，粘性页脚要复杂得多。如果有滚动，则必须滚动底部才能看到页脚，否则它会停留在底部。

【解决方案3】：

我多年来一直遇到同样的问题，但似乎没有任何效果，然后我意识到我在页脚下看到的空白实际上根本不是空白，而是从我的页脚溢出，带有白色背景上的白色文本。我所要做的就是添加：

overflow:hidden

到我的 CSS 中的页脚。

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

【讨论】：

【解决方案4】：

DISPLAY TABLE = 无 JS 且无固定高度！

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

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

解释：基本上你有一个容器 div 有 2 个子元素：一个包装器和一个页脚。将页面上所需的所有内容（除了页脚）放入包装器中。容器设置为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>

【讨论】：