CSS粘性底部边距

Question

CSS粘性底部边距

6

我不想要固定页尾，我需要粘性页尾。一开始我的粘性页尾运行良好，但当内容达到某个高度时，页尾与页面底部之间有一个间距。你可以尝试调整浏览器高度和内容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>

- Connor

4个回答

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中正常工作的示例

- Samuel

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

0

我曾经遇到了同样的问题，很长时间都无法解决，后来我意识到我在页脚下看到的空白实际上并不是真正的空白，而是我的页脚溢出的白色文本在白色背景上。我所要做的就是添加：

overflow:hidden

在我的CSS中添加到页脚。

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

- Dominic

0

无 JS 和无固定高度的 DISPLAY TABLE！

适用于现代浏览器（IE 8+）- 我在几个浏览器中测试过，所有功能都运行良好。

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

解释：基本上，您有一个包含两个子元素的容器 div：一个包装器和一个页脚。将页面上所需的所有内容（除了页脚）放在包装器中。容器设置为display: table;，包装器设置为display: table-row;如果将 html、body 和 wrapper 设置为height: 100%，则页脚将粘在底部。

页脚也设置为display: table;。这是必要的，以获取子元素的 margin。您还可以将页脚设置为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>

- J.T. Houtenbos

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Luis · Accepted Answer

只需在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; /*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>