Bootstrap 4.6.0 调整浏览器屏幕大小时页脚与正文内容重叠？

Question

首先，我在 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%) 但没有用。

Answer 1

几周前我也有同样的问题。凯文·鲍威尔 (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%;
}

Bootstrap 4.6.0 调整浏览器屏幕大小时页脚与正文内容重叠？

Bootstrap 4.6.0 footer overlap with body content when resizing browser screen?

html

css

twitter-bootstrap