无需（不必要的）滚动条即可将页脚粘贴到页面底部

本文介绍了无需（不必要的）滚动条即可将页脚粘贴到页面底部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 编辑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，然后它开始正确地粘贴到底部。但现在又出现了另一个问题！我现在有不必要的滚动条！ 或（此链接已损坏，看到这个代替），这是我最喜欢的），那么我敢打赌，你有一个更大问题比面值。这两个例子已经证明了时间的检验，但仍然是创建粘贴在页面底部的页脚的最常用方法。虽然我没有抨击你的代码，但我建议你也许会重做你从头开始创建的页面，并将第一个实现作为粘滞页脚。从那里你应该能够复制和粘贴你的视觉样式，如果它再次拧紧，那么你知道你的罪魁祸首的代码行。 (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! 这篇关于无需（不必要的）滚动条即可将页脚粘贴到页面底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！