无需（不必要的）滚动条即可将页脚粘贴到页面底部 [英] Stick Footer to Bottom of Page without (unnecessary) scroll bars

问题描述

编辑2：

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

 < div id =footer> 
< div id =copyright-bgclass =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，然后它开始正确地粘贴到底部。但现在又出现了另一个问题！我现在有不必要的滚动条！ 或 < 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;} / *必须与页脚高度相同* / 
 
 #footer {position：relative; 
 margin-top：-100px; / *页脚高度负值* / 
 height：100px; 
 clear：both;} 
  

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

EDIT 2:

There was an error in my code that was causing the footer to not stick to the bottom of the page. My code looked something like this:

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

I removed <div id="footer"> and moved those CSS properties to id="copyright-bg" and it then began to stick properly to the bottom. But now there has risen another issue! I now have unnecessary scroll bars! Here is a Fiddle that has the barest of code to attempt to figure what is going on. I thought it could be the gradient but when I changed the code to a solid background the scroll bars still appeared.

Note: I have tested in Chrome and Firefox.

EDIT:

I have attempted to use the CSS Sticky Footer per instructions on the website.

I assume there is a conflict in my CSS(?) here is a Fiddle of the page.

I have also attempted what this website suggested and while it technically works it creates scrollbars! I would like to avoid that if possible.

Original Question

I am working on a page and if the page does not have much content (IE no scroll bars for the page) I am left with a black bar below my copyright container.

Here is a screenshot:

Note: Where you see the word Done is the bottom of my browser, an arrow is pointing to the black bar.

I have attempted a few things to remove the bar. When I add height: 100%; to the body tag it will take my background gradient and it will reach to the bottom of the page but again that doesn't look good. I then attempted to add height: 100% to the copyright container. That caused the gray area to stretch way down and cause excessive empty space and scrollbars. I have attempted to position the element absolutely but that causes several other issues and would prefer to avoid positioning absolutely.

How do I remove the black bar? (Preferably with just CSS but will accept an answer that uses 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;
 }

解决方案

If you have tried multiple solutions (like Ryan Fait's footer or the CSS Sticky Footer (this link is broken, see this instead), which is my favorite) then I would bet that you have a bigger problem than face value. Those two examples have proven the test of time and yet still remain the most commonly used methods for creating a footer which sticks to the bottom of the page. While I'm not bashing your code, I would suggest that maybe you redo the page you're creating from scratch and have the first implementation be the sticky footer. From there you should just be able to copy and paste over your visual styles and if it screws up again then you know your culprit line of code.

EDIT:

I needed to edit your code a bit because the lack of indentation made it difficult to read. Here's the new jsFiddle. What I did change were a few things. Here's the additions to the top of your CSS code:

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

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

Those lines are 100% necessary to make your code work. Not only do you need to do a wildcard (*) reset on all elements, but you also need to tell the document (html) and the body (body) to take up the full height of the screen. I don't remember if it was in your original CSS, but #content-wrap should have a min-height of 100% as well.

After searching through, I realize your footer isn't actually 180px in height, but rather 100px in height. Here's the final jsFiddle. And also, here's the final code to make the footer stick:

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

You should see now that when you apply this code, the footer sticks to the bottom (and does so without duct tape). Hope this helps!

这篇关于无需（不必要的）滚动条即可将页脚粘贴到页面底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！