5

编辑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"然后它开始正确地粘在底部。但是现在又出现了一个问题！我现在有不必要的滚动条！这是一个 Fiddle，它有最简单的代码来试图弄清楚发生了什么。我认为这可能是渐变，但是当我将代码更改为纯色背景时，滚动条仍然出现。

注意：我已经在 Chrome 和 Firefox 中进行了测试。

编辑：

我已尝试按照网站上的说明使用CSS Sticky Footer。

我假设我的 CSS（？）中存在冲突，这是页面的小提琴。

我也尝试过这个网站的建议，虽然它在技术上有效，但它会创建滚动条！如果可能的话，我想避免这种情况。

原始问题

我正在处理一个页面，如果该页面没有太多内容（即页面没有滚动条），我的版权容器下方会留下一个黑条。

这是一个屏幕截图：

截屏

注意：你看到这个词的地方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;
 }
4

2 回答 2

4

如果您尝试了多种解决方案（例如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-height100%。

搜索后，我意识到您的页脚实际上不是 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;}

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

于 2012-09-17T01:49:14.983 回答
2

大多数粘性页脚代码似乎会导致我的页面出现问题。要解决此问题，我使用以下代码：

HTML

<body>
 <div id="page-content">
   <header> 
     <!-- Header Content Goes Here --> 
   </header> 

     <!-- Page Content Goes Here --> 

   <footer>
     <!-- Footer Content Goes Here --> 
   </footer>

 </div>
</body>

JS

$(function() {
   var height = $(window).height() - ($("header").outerHeight() + $("footer").outerHeight() );
 $("#page-content").css("min-height",height+"px");
});

这样做是计算页面的高度并设置页面的最小高度，从而将页脚粘贴到底部。它工作得很好。

注意：我使用的是 HTML5。

于 2012-10-04T22:30:29.660 回答