这是我的代码：如何强制我的页脚粘贴到CSS中任何页面的底部？
#footer {
font-size: 10px;
position:absolute;
bottom:0;
background:#ffffff;
}
我不知道什么是错的这一点 - 任何人都可以帮忙吗？
编辑：对于一些更清晰的错误：当页面加载时，页脚在底部显示为预期。但是，当网页的高度大于屏幕上的尺寸以使滚动条出现时，页脚停留在同一位置。也就是说，当页面的高度为< = 100％时，页脚位于底部。但是，当页面高度> 100％时，页脚不在该页面的底部，而是在可见屏幕的底部。
编辑：令人惊讶的是，没有下面的解决方案工作。我最终实现了侧边栏。
你可能寻找this example：
<div class="wrapper">
Your content here
<div class="push"></div>
</div>
<div class="footer">
Your footer here
</div>
对于142像素页脚
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
变高度页脚怎么样？ – 2017-01-09 19:33:09
@DustinGraham：您需要使用flex，并将滚动条移动到内容 – SLaks 2017-01-09 20:31:36
的包装是你的页面的其余部分。负值/正值的边际/高度值是魔术发生的地方。
.wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
}
.footer, .push
{
height: 142px; /* .push must be the same height as .footer */
}
请勿使用position：absolute;因为页面高度会发生变化。如果它是绝对的，那么页脚不会随页面高度移动。
你想使用ryan fait的方法。
虽然我会亲自这样做，
.wrap {margin: auto; width: 980px;}
#content {min-height: 600px;}
#footer {height: 300px;}
<div class="wrap">
<div id="content">
</div>
</div>
<div id="footer">
<div class="wrap">
</div>
</div>
这样您就不必乱用负边距和填充。这也可以很容易地改变HTML5 #footer的一部分，以
<footer>
</footer>
您从哪里获得300px和600px？不是很通用的解决方案 – SummerBreeze 2014-05-19 16:08:45
#footer { clear:both; position:fixed; width:100%; height:50px; bottom:0; background:black;}
试试这个：
position: fixed;
bottom: 0;
这将把页脚放在窗口的底部，但不在页面的底部（如果页面高于窗口）... – severin 2015-07-15 14:46:37
为什么不使用jQuery？
在页眉和页脚之间放置一个包装div，并为jquery的包装指定min-height属性，与文档高度和（页眉高度+页脚高度）之间的差异相等。
<script type="text/javascript">
$(document).ready(function(){
var dh = $(document).height(); //document height here
var hh = $('header').height(); //header height
var fh = $('footer').height(); //footer height
var wh = Number(dh - hh - fh); //this is the height for the wrapper
$('#wrapper').css('min-height', wh); //set the height for the wrapper div
});
</script>
这就是我所做的，它导致我的页脚停留在底部。
.footer2{
background-color:#606060 ;
color: #ffffff;
height: 30px;
bottom:0px;
position:fixed;
width:100%;
}
.footer-small, .push {
background-color: #2C3E50;
position: fixed;
padding-top: 5px;
clear:both;
width: 100%;
bottom:0px;
z-index: 0;
}
这也为我工作....
我在努力寻找解决办法，因为没有建议实现我想要的东西：
这是对我工作：
HTML：
<body>
<div class="page-wrapper">
<h1>
Page
</h1>
</div>
<footer>
Footer here
</footer>
</body>
CSS：
body {
height: 100%;
width: 100%;
}
.page-wrapper {
min-height:100vh; /*1vh = 1% of browser screen height*/
}
footer{
position: relative;
width: 100%;
bottom: 0px;
}
Here在行动。
[This answer]（http://stackoverflow.com/a/ 26090114/5802289）走向相同的方向，并更好地解释。 – J0ANMM 2017-02-17 22:31:21
我有同样的问题，来这里寻找答案，并没有找到它，然后试图对我自己的一些实验，终于得到了解决：
#body {
overflow-y: 0 auto;
}
#footer {
color: #fff;
background-color: rgba(0,0,0,0.6);
position: fixed;
padding: 10px;
top: 100vh;
margin-top: -100px;
width: 100%; height: 100px;
}<div id="body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div id="footer">
<span>Some dummy Text</span>
</div>
为什么？怎么了？ – SLaks 2011-04-01 17:46:54
重复[如何让页脚停留在网页底部？]（http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-网页底部） – Phrogz 2011-04-01 17:50:34
SLaks说的是：这是一个糟糕的问题，因为你没有描述你想要的结果和你得到的结果。你写的是有效的CSS代码，这就是我所能告诉你的。另外，如上所述，这个问题以前已经被提出并回答过。 – Phrogz 2011-04-01 17:51:30