谁能解释如何将页脚 div 与页面底部对齐。从我看到的示例中，它们都显示了如何使 div 保持在底部可见，无论您在哪里滚动页面。虽然我不想那样。我希望它固定在页面底部，所以它不会移动。感谢您的帮助！
【问题讨论】：
这将使 div 固定在页面底部，但如果页面很长，它只会在您向下滚动时可见。
<style type="text/css">
#footer {
position : absolute;
bottom : 0;
height : 40px;
margin-top : 40px;
}
</style>
<div id="footer">I am footer</div>
高度和上边距应该相同，这样页脚就不会显示在内容之上。
【讨论】：
更新
我原来的答案是很久以前的，链接坏了；更新它以使其继续有用。
我包括更新的内联解决方案，以及 JSFiddle 上的工作示例。注意：我依赖于 CSS 重置，尽管我没有将这些样式包含在内。参考normalize.css
解决方案 1 - 边距偏移
https://jsfiddle.net/UnsungHero97/ur20fndv/2/
HTML
<div id="wrapper">
<div id="content">
<h1>Hello, World!</h1>
</div>
</div>
<footer id="footer">
<div id="footer-content">Sticky Footer</div>
</footer>
CSS
html, body {
margin: 0px;
padding: 0px;
min-height: 100%;
height: 100%;
}
#wrapper {
background-color: #e3f2fd;
min-height: 100%;
height: auto !important;
margin-bottom: -50px; /* the bottom margin is the negative value of the footer's total height */
}
#wrapper:after {
content: "";
display: block;
height: 50px; /* the footer's total height */
}
#content {
height: 100%;
}
#footer {
height: 50px; /* the footer's total height */
}
#footer-content {
background-color: #f3e5f5;
border: 1px solid #ab47bc;
height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
padding: 8px;
}
解决方案 2 - 弹性盒
https://jsfiddle.net/UnsungHero97/oqom5e5m/3/
HTML
<div id="content">
<h1>Hello, World!</h1>
</div>
<footer id="footer">Sticky Footer</footer>
CSS
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100%;
}
#content {
background-color: #e3f2fd;
flex: 1;
padding: 20px;
}
#footer {
background-color: #f3e5f5;
padding: 20px;
}
这里有一些链接，其中包含更详细的解释和不同的方法：
原始答案
这是你的意思吗？
http://ryanfait.com/sticky-footer/
此方法仅使用 15 行 CSS，几乎没有任何 HTML 标记。更好的是，它是完全有效的 CSS，并且适用于所有主流浏览器。 Internet Explorer 5 及更高版本、Firefox、Safari、Opera 等。
此页脚将永久保留在页面底部。这意味着如果内容超过浏览器窗口的高度，您将需要向下滚动才能看到页脚......但如果内容小于浏览器窗口的高度，页脚将粘在底部浏览器窗口，而不是在页面中间浮动。
如果您在实施方面需要帮助，请告诉我。我希望这会有所帮助。
【讨论】：
检查一下，适用于 firefox 和 IE
<style>
html, body
{
height: 100%;
}
.content
{
min-height: 100%;
}
.footer
{
position: relative;
clear: both;
}
</style>
<body>
<div class="content">Page content
</div>
<div class="footer">this is my footer
</div>
</body>
【讨论】：
您的标题和 cmets 暗示您不是在寻找粘性页脚（当内容在其下方滚动时卡在窗口底部）。我假设您正在寻找一个页脚，如果内容未填满窗口，该页脚将被强制到窗口底部，如果内容超出窗口边界，则该页脚会向下推到内容底部。
您可以通过以下方式完成此操作。
<style>
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
</style>
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>【讨论】：
我是新手，这些方法对我不起作用。但是，我在 css 中尝试了一个 margin-top 属性，并简单地添加了内容像素的值 +5。
示例：我的内容布局的高度为 1000 像素，因此我在页脚 css 中设置了 1005 像素的 margin-top 值，这给了我一个 5 像素的边框和一个位于我网站底部的页脚。
可能是一种业余的做法，但有效！！！
【讨论】：
使用
<div style="position:fixed; bottom:0; height:auto; margin-top:40px;
width:100%; text-align:center">
I am footer
</div>
页脚不会向上
【讨论】：
我使用的一个简单解决方案，适用于 IE8+
在 html 上设置 min-height:100%，这样如果内容较少，则页面仍会采用完整的视口高度，并且页脚会停留在页面底部。当内容增加时，页脚会随着内容向下移动并保持在底部。
JS fiddle 工作演示：http://jsfiddle.net/3L3h64qo/2/
html{
position:relative;
min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
margin:0;
padding:0;
}
.pageContentWrapper{
margin-bottom:100px;/* Height of footer*/
}
.footer{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height:100px;
background:#ccc;
}
<html>
<body>
<div class="pageContentWrapper">
<!-- All the page content goes here-->
</div>
<div class="footer">
</div>
</body>
</html>
【讨论】：