无论页面是否有内容，如何将页脚保持在每个页面的底部？答案

【问题标题】：How to keep my footer on the bottom of every page regardless if the page has content or not?无论页面是否有内容，如何将页脚保持在每个页面的底部？
【发布时间】：2016-01-05 02:39:12
【问题描述】：

我正在使用默认的 Web 应用程序 MVC 项目，如果我在页面上没有太多内容，页脚就会上升。如何让页脚始终保持在页面底部？

我的html结构是这样的

<body>
  <div class="body-content"><div>
  <footer></footer>
</body>

【问题讨论】：

您需要更具体，并提供代码示例。阅读 Stack Overflow 的帮助部分，了解如何提出正确的问题。
css-tricks.com/snippets/css/sticky-footer
用bottom: 0px; 声明一个css规则并选择满足您需求的固定/绝对位置。
@marmeladze 只会将页脚放在视口底部，当您向下滚动时，页脚会保持在上方。
@ZackTanner 这对我也不起作用，页脚位于页面中间，并且与其他元素重叠

标签： html css footer

【解决方案1】：

<!doctype html>
<html>
<head>
<title>Sticky footer</title>
<meta charset="UTF-8"/>
<style>
html, body {
height: 100%;
background: #e4e4e4;
margin: 0px;
padding: 0px;
}
.wrapper {
min-height: 100%;
width: 100%;
}
.main {
clear: both;
overflow: auto;
padding-bottom: 100px;
}
footer {
margin-top: -100px;
background-color: #1b1e25;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
}

</style>
</head>
<body>
<div class="wrapper">
<div class="main">
<p>Some content</p>
</div>
</div>

<footer>
<p>footer</p>
</footer>
</body>
</html>

原文来源：http://www.cssstickyfooter.com/

【讨论】：

感谢您的教程，我试过了，这正是我需要的。