Bootstrap 4.6.0 调整浏览器屏幕大小时页脚与正文内容重叠?
Bootstrap 4.6.0 footer overlap with body content when resizing browser screen?
首先,我在 Whosebug 上查找了解决此问题的不同方法,但 none 的建议答案对我有用。我正在使用 bootstrap 4.6.0,试图将页脚设置在底部,但我面临的问题是,在调整屏幕大小时,页脚位于正文内容之上。尝试使用固定底部 class。还尝试将 body 位置设置为 relative 并给它一个 100% 的 min-height
然后将页脚的位置设置为 absolute 但这不起作用我使用 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 上的许多基础知识。我的观点是,最好在依赖库和框架为你做事之前先学习 vanilla... 因为那样你就不会确切地知道那个库或框架是如何做的。
https://www.youtube.com/watch?v=yc2olxLgKLk
这是基于该视频的 Vanilla HTML/CSS 中的解决方案。我更改了您 HTML 中的一些元素,只是为了使其更易于阅读。您可能会有一些想要更改的内容,但这只是为了让您开始!当然,如果您愿意,以后仍然可以添加 bootstrap 或 JQuery 而不会出现任何中断。希望对您有所帮助!
这是代码笔 link,这样您就可以预览我的解决方案,而无需覆盖您目前所做的任何事情。 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%;
}
首先,我在 Whosebug 上查找了解决此问题的不同方法,但 none 的建议答案对我有用。我正在使用 bootstrap 4.6.0,试图将页脚设置在底部,但我面临的问题是,在调整屏幕大小时,页脚位于正文内容之上。尝试使用固定底部 class。还尝试将 body 位置设置为 relative 并给它一个 100% 的 min-height
然后将页脚的位置设置为 absolute 但这不起作用我使用 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 上的许多基础知识。我的观点是,最好在依赖库和框架为你做事之前先学习 vanilla... 因为那样你就不会确切地知道那个库或框架是如何做的。
https://www.youtube.com/watch?v=yc2olxLgKLk
这是基于该视频的 Vanilla HTML/CSS 中的解决方案。我更改了您 HTML 中的一些元素,只是为了使其更易于阅读。您可能会有一些想要更改的内容,但这只是为了让您开始!当然,如果您愿意,以后仍然可以添加 bootstrap 或 JQuery 而不会出现任何中断。希望对您有所帮助!
这是代码笔 link,这样您就可以预览我的解决方案,而无需覆盖您目前所做的任何事情。 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%;
}