将页脚粘贴到页面底部没有(不必要的)滚动条

Question

编辑2:

我的代码中有一个错误导致页脚没有粘到页面底部.我的代码看起来像这样:

<div id="footer">
 <div id="copyright-bg" class="container">
  <div class="row">
   <div class="twelvecol">
    <p class="copyright-text">Lorum Ipsum</p>
</div>
</div>
</div>
</div>

我删除<div id="footer">并移动了那些CSS属性,id="copyright-bg"然后开始正确地粘贴到底部.但现在又出现了另一个问题!我现在有不必要的滚动条!这是一个小提琴,它有最简单的代码来试图弄清楚发生了什么.我认为它可能是渐变但当我将代码更改为纯色背景时,滚动条仍然出现.

注意:我已在Chrome和Firefox中测试过.

编辑:

我试图在网站上按照说明使用CSS Sticky Footer.

我假设我的CSS中有冲突(？)这里是页面的小提琴.

我也试过这个网站建议的内容,虽然它在技术上有效,但它创建了滚动条!如果可能的话,我想避免这种情况.

原始问题

我在一个页面上工作,如果页面内容不多(IE没有页面滚动条),我的版权容器下面留下了一个黑条.

这是一个截图:

注意:如果您看到该字词Done位于浏览器的底部,则箭头指向黑条.

我尝试了一些东西来删除吧.当我添加height: 100%;到body标签时,它将采用我的背景渐变,它将到达页面的底部,但再次看起来不太好.然后我尝试添加height: 100%到版权容器中.这导致灰色区域向下延伸并导致过多的空白空间和滚动条.我试图绝对定位元素,但这导致其他一些问题,并且宁愿避免绝对定位.

如何取下黑条？(最好只用CSS但会接受使用jQuery/Javascript的答案)

代码:

HTML:

<!-- Body Content Is Here -->
<div id="copyright-bg" class="container">
<div class="row">
<div class="twelvecol">
    <p class="copyright-text">Ipsum</p>
</div>
</div>
</div> 

CSS:

html, body{
font-size:1em;
font-family: "ff-dagny-web-pro", Helvetica, Arial, sans-serif;
line-height:1.438em;
color:#222;
    margin: 0;
    padding: 0;
    text-align: justify;
    background: linear-gradient(to bottom, rgba(0,0,0,1) 25%,rgba(209,209,209,1) 100%);
    /* Vendor Specific Background Gradients... */
}

#copyright-bg{
margin-top:1.875em;
background: none repeat scroll 0 0 #666666;
    border-top: 5px solid #E31836;
padding:1.250em;
}

.container {
    padding-left: 20px;
    padding-right: 20px;
}

.row {
    width: 100%;
    max-width: 1140px;
    min-width: 755px;
    margin: 0 auto;
    overflow: hidden;
 }

.row .twelvecol {
    width: 100%;
    float: left;
 }

Answer 1

如果您尝试过多种解决方案（例如Ryan Fait 的页脚或CSS Sticky Footer（此链接已损坏，请参阅此），这是我最喜欢的），那么我敢打赌您遇到的问题比表面价值更大。这两个示例已经证明了时间的考验，但仍然是创建粘在页面底部的页脚的最常用方法。虽然我不会抨击您的代码，但我建议您也许可以从头开始重做您正在创建的页面，并让第一个实现成为粘性页脚。从那里你应该能够复制并粘贴你的视觉样式，如果它再次搞砸，那么你就知道你的罪魁祸首代码行。

编辑：

我需要对您的代码进行一些编辑，因为缺少缩进使其难以阅读。 这是新的 jsFiddle。 我所做的改变有几件事。以下是 CSS 代码顶部的添加内容：

* {margin:0;padding:0;} 
html, body {height: 100%;}

#content-wrap {min-height: 100%;}

这些行对于使您的代码正常工作是 100% 必需的。您不仅需要对*所​​有元素进行通配符 ( ) 重置，还需要告诉文档 ( html) 和正文 ( body) 占据屏幕的整个高度。我不记得它是否在你原来的 CSS 中，但#content-wrap应该min-height也有 100% 的。

经过搜索后，我发现你的页脚高度实际上不是 180px，而是 100px。 这是最终的 jsFiddle。 另外，这是使页脚粘住的最终代码：

#main {overflow:auto;
    padding-bottom: 100px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -100px; /* negative value of footer height */
    height: 100px;
    clear:both;} 

您现在应该看到，当您应用此代码时，页脚会粘在底部（并且无需使用胶带）。希望这可以帮助！