代码之家 › 专栏 › 技术社区 › Connor

CSS粘滞页脚边距

sticky footer css

Connor · 技术社区 · 13 年前

我不想要固定的页脚,我需要一个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>

4 回复 | 直到 13 年前

Luis 9 年前

只需添加 position: fixed; 到您的 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>

Samuel 13 年前

添加 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中工作

Dominic 11 年前

很长一段时间以来,我一直有同样的问题,但似乎什么都不起作用,然后我意识到我在页脚下看到的空白实际上根本不是空白,而是页脚溢出的白色背景上的白色文本。我所要做的就是补充:

overflow:hidden

到css中的页脚。

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

J.T. Houtenbos 10 年前

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

适用于现代浏览器(IE 8+)-我在几个浏览器中进行了测试,结果似乎都很好。

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

说明: 基本上,您有一个包含两个子元素的容器div:一个包装器和一个页脚。将页面上需要的所有内容(页脚除外)放入包装中。容器设置为 display: table; 包装器设置为 display: table-row; 如果将html、body和wrapper设置为 height: 100% ,页脚将粘到底部。

页脚设置为 显示:表格; 也这是必要的,以获得子元素的余量。您也可以将页脚设置为 显示:表格行; 这将不允许您设置 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>