6

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

4

4 回答 4

3

只需在您的 css 中添加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>

于 2012-08-08T15:47:46.387 回答
1

添加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 中也能工作的示例

于 2012-08-08T15:48:32.610 回答
0

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

overflow:hidden

到我的 CSS 中的页脚。

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

于 2014-07-07T01:34:19.237 回答
0

显示表 = 没有 JS 和没有固定高度！

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

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

说明：基本上你有一个包含 2 个子元素的容器 div：一个包装器和一个页脚。将页面上所需的所有内容（除了页脚）放在包装器中。容器设置为display: table;包装器设置为display: table-row;如果将 html、正文和包装器设置为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>

于 2016-02-08T16:55:38.660 回答