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

时间：2012-09-16 17:40:30

标签： html css

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

注意：我已在Chrome和Firefox中测试过。

编辑：

我试图在CSS Sticky Footer上按照website的说明使用{。}}。

我认为页面的CSS（？）here is a Fiddle存在冲突。

我还尝试了this website suggested，虽然它在技术上有效但它创建了滚动条！如果可能的话，我想避免这种情况。

原始问题

我在一个页面上工作，如果页面内容不多（IE没有页面滚动条），我的版权容器下面留下了一个黑条。

以下是截图：

Screenshot

注意：如果您看到单词Done位于浏览器的底部，则箭头指向黑条。

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

如何移除黑条？ （最好只使用CSS，但会接受使用jQuery / Javascript的答案）

CODE ：

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;
 }

2 个答案:

答案 0 :(得分：4)

如果您尝试了多种解决方案（例如Ryan Fait's footer或 CSS Sticky Footer （此链接已损坏，see this instead），这是我的最爱）那么我会打赌你的问题比面值大。这两个例子已经证明了时间的考验，但仍然是创建一个贴在页面底部的页脚最常用的方法。虽然我不是在抨击你的代码，但我建议你重做你从头开始创建的页面并让第一个实现成为粘性页脚。从那里你应该能够复制并粘贴你的视觉风格，如果它再次搞砸了，那么你就知道了你的罪魁祸首。

修改

我需要稍微编辑你的代码，因为缺少缩进使其难以阅读。 Here's the new 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的高度。 Here's the final 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;}

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

答案 1 :(得分：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。

相关问题
最新问题