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

To start with, I have looked up different ways to fix this issue on StackOverflow but none of the proposed answers have worked with me. I am using bootstrap 4.6.0, trying to set the footer at the bottom but the issue I am facing is that when resizing the screen the footer goes on top of the body content. Tried to use the fixed-bottom class. Also tried to set the body position to relative and give it a min-height of 100% then set the position of the footer to absolute but that did not work either I used ASP.NET MVC and I will share my full used code for your review.

.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
    <div  >
<div >
                <div >
                    <label >Email:</label>
                    <input   type="email"/>
                </div>
                <div >
                    <label >Password:</label>
                    <input  type="password"  />
                </div>
</div>
<footer >
<p style="text-align:center">My ASP.NET Application</p>
</footer>
</div>

How Can I make the footer stay at the bottom of the page even if a resize the browser? Also tried transform:translateX(80%) but did not work.

CodePudding user response：

I had the same question a few weeks ago. This 7minute video from Kevin Powell really describes it well. I'd also recommend his channel. He covers a lot of the basics on CSS frequently. My opinion is it's better to learn vanilla before depending upon libraries and frameworks to do things for you... because then you won't know exactly how that library or framework is doing it.

https://www.youtube.com/watch?v=yc2olxLgKLk

Here's the solution in Vanilla HTML / CSS based around that video. I changed around a few elements in your HTML just to make it easier to read. You'll probably have a few things you'll want to change but this is just to get you started! Of course you can still add bootstrap or JQuery in the future if you want without any of this breaking. Hope it helps!

here's the codepen link so you can preview my solution without overriding anything you've made so far. 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 >
    <form >
         <label>
           <p >Email:</p>
           <input   type="email"/>
         </label>
         <label>
           <p >Password:</p>
           <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%;
}