首先，我在StackOverflow上查找了不同的方法来解决这个问题，但没有一个建议的答案对我有效。我使用bootstrap 4.6.0，试图将页脚设置在底部，但我面临的问题是，当调整屏幕大小时，页脚会位于正文内容的顶部。尝试使用固定的基类。还尝试将正文位置设置为相对位置，并将其设为100%的min-height，然后将页脚的位置设置为绝对位置，但这也不起作用。我使用了ASP.NET MVC，我将分享我使用过的全部代码供您审阅。
.main-login-container {
padding-top:40px;
position:relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 70%;
min-height: 70vh;
}
body {
height: 100%;
}
html * {
box-sizing: border-box !important;
}
html {
height: 100%;
box-sizing: border-box !important;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
.footer{
position: absolute;
bottom: 0;
background-color: #16a085;
width:100%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"></script>
<div class="container body-content" >
<div class="containter">
<div class="form-group">
<label class="control-label">Email:</label>
<input class="form-control" type="email"/>
</div>
<div class="form-group">
<label class="control-label">Password:</label>
<input class="form-control" type="password" />
</div>
</div>
<footer class="footer">
<p style="text-align:center">My ASP.NET Application</p>
</footer>
</div>即使调整浏览器大小，我如何使页脚保持在页面底部？也尝试过transform:translateX(80%)，但没有成功。
几周前我也有同样的问题。Kevin Powell的这段7分钟的视频非常好地描述了这一点。我也推荐他的频道。他经常涉及CSS的许多基础知识。我的观点是，在依赖库和框架为你做事之前，最好先学习香草。。。因为那样你就不知道这个库或框架到底是怎么做的
https://www.youtube.com/watch?v=yc2olxLgKLk
以下是基于该视频的VanillaHTML/CSS解决方案。我更改了HTML中的一些元素，只是为了更容易阅读。你可能会有一些想要改变的事情，但这只是为了让你开始！当然，如果您愿意的话，您仍然可以在未来添加bootstrap或JQuery，而不会出现任何中断。希望它能有所帮助！
这是codepen链接，这样您就可以预览我的解决方案，而无需覆盖您迄今为止所做的任何内容。https://codepen.io/gold240sx/pen/bGaqqrz
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign In:</title>
</head>
<body>
<div class="content">
<form class="login-container">
<label>
<p class="label">Email:</p>
<input class="form-input" type="email"/>
</label>
<label>
<p class="label">Password:</p>
<input class="form-input" type="password"/>
</label>
</form>
</div>
<footer>
<p style="text-align:center">My ASP.NET Application</p>
</footer>
</body>
</html>
CSS:
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
display: flex;
flex-direction: column;
min-height: 100vh;
font-size: 16px;
}
.content{
padding-inline: 3rem;
height: fit-content;
margin-top: auto;
}
form {
min-height: fit-content;
align-items: center;
min-width: fit-content;
min-height: fit-content;
position: relative;
margin: auto;
line-height: 30px;
}
.form-input {
width: 100%;
line-height: 30px;
border: 2px solid gray;
border-radius: 5px;
}
input:focus {
outline: none;
background-color: lightgrey;
}
.form-group {
max-width: 600px;
margin-inline: auto;
}
.login-container {
border: 2px solid grey;
border-radius: 25px;
max-width: 600px;
padding: 5px 20px 20px 20px;
justify-content: center;
}
footer{
margin-top: auto;
background-color: #16a085;
padding: 20px;
width: 100%;
}