在调整浏览器屏幕大小时，引导4.6.0页脚与主体内容重叠？
在调整浏览器屏幕大小时，引导4.6.0页脚与主体内容重叠？
提问于 2022-03-25 20:59:12
首先，我找到了在StackOverflow上解决这个问题的不同方法，但是没有一个建议的答案与我合作过。我正在使用引导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%)，但没有起作用。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-03-25 21:02:50
几周前我也有同样的问题。凯文·鲍威尔的这段7分钟的视频描述得很好。我也会推荐他的频道。他经常介绍有关CSS的许多基础知识。我的观点是，最好先学会香草，然后再依靠库和框架来为你做事……因为这样你就不知道那个库或框架是怎么做的。
https://www.youtube.com/watch?v=yc2olxLgKLk
以下是基于该视频的Vanilla HTML / CSS解决方案。我对HTML中的几个元素进行了修改，只是为了让它更容易阅读。你可能会有一些事情你会想要改变，但这只是为了让你开始！当然，如果您愿意的话，将来仍然可以添加引导程序或JQuery，而不会造成任何破坏。希望能帮上忙！
下面是代码链接，这样您就可以预览我的解决方案，而无需覆盖到目前为止所做的任何工作。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%;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71623040
复制相关文章
相似问题
腾讯云开发者
