答案 0 :(得分：3)
您已在身体上设置了100％的高度，因此您的身体将始终与视口一样高。尝试使用CACHE MANIFEST
# 2016-01-07:v1.0.4
# This is the default section for entries. Files listed under this header (or immediately after the CACHE MANIFEST) will be explicitly cached after they're downloaded for the first time.
CACHE:
# Files listed in this section may come from the network if they aren't in the cache, otherwise the network isn't used, even if the user is online. You can white-list specific URLs here, or simply "*", which allows all URLs. Most sites need "*".
NETWORK:
*
# An optional section specifying fallback pages if a resource is inaccessible. The first URI is the resource, the second is the fallback used if the network request fails or errors. Both URIs must from the same origin as the manifest file. You can capture specific URLs but also URL prefixes. "images/large/" will capture failures from URLs such as "images/large/whatever/img.jpg".
FALLBACK:作为身体（也添加相对于身体的位置）：
min-heighthtml {
height: 100%;
}
body {
position: relative;
margin: 0;
padding: 0;
min-height: 100%;
width: 100%;
font-family: "Times New Roman", Times, serif;
font-size: 20px;
}
header {
background: rgba(150, 150, 150, 0.5);
border-bottom: solid 1px;
width: 100%;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
}
main {
padding-top: 5px;
padding-left: 100px;
padding-right: 100px;
padding-bottom: 60px;
}
footer {
border-top: solid 1px;
background: rgba(150, 150, 150, 0.5);
width: 100%;
height: 40px;
padding-top: 10px;
position: absolute;
bottom: 0;
left: 0;
text-align: center;
}
答案 1 :(得分：0)
无需为页脚指定位置，也可以删除底部和左侧。您需要指定每个部分的高度（以％为单位）。试试下面的CSS，
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: "Times New Roman", Times, serif;
font-size: 20px;
}
header {
height:10%;
background: rgba(150,150,150,0.5);
border-bottom: solid 1px;
width: 100%;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
}
main {
height:80%;
padding-top: 5px;
padding-left: 100px;
padding-right: 100px;
padding-bottom: 60px;
}
footer {
height:10%;
border-top: solid 1px;
background: rgba(150,150,150,0.5);
width: 100%;
height: 40px;
padding-top: 10px;
text-align: center;
}
在这里，如果屏幕尺寸较大或有人缩小屏幕或页面中的内容非常少，则页脚将始终保留在页面底部。
答案 2 :(得分：-1)
如果你可以使用flexbox，那就是你的解决方案。看看这里的css技巧 - 你不需要更多。 https://css-tricks.com/couple-takes-sticky-footer/
HTML：
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
CSS：
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto;
}