Removing white space below Footer-CodePudding

I have empty space below the footer which I want to remove.

Attached are my HTML and CSS codes for Footer.

footer {
          text-align: center;
          font-size: 0.9rem;
          font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
          margin-top: auto;
        }

 <footer >
              <div >
                  <div >
                      <div >Copyright &copy; myWebsite</div>
                      <div >
                  </div>
              </div>
          </footer>

CodePudding user response：

You can try this

footer {
          text-align: center;
          font-size: 0.9rem;
          font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
          margin: auto;
          position: absolute;
          width: 100%;
          bottom: 0;
        }

<footer >
              <div >
                  <div >
                      <div >Copyright &copy; myWebsite</div>
                      <div >
                  </div>
              </div>
          </footer>

CodePudding user response：

There are many ways to achieve a bottom most footer @chyke007 showed a solution using positioning absolute to start the element at the relevant elements bottom. This is a very common way to achieve a sticky bottom but you must stay aware of the relevant positioning ancestor and sibling element. Also if you did want to use absolute position then it maybe wise to add padding bottom to the main content that is at least the min set height of your footer. This is so your content does not run underneath your footer also you will need to be aware of your position zindex for other element may running over-top or underneath. For any positioned element its a good idea to have indexing zone for where you want positioned element to exist such as 1-1999, 2000-3999, ect or how every you wish to define these zone for your project this is to try and limit element overlap.

The another solution is to use layouts such as flexbox columns

html, body {
  margin: 0
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column
}

header {
  background: #333;
  flex: 0 0 60px
}

h1 {
  color: #eee;
  padding-left:15px;
  font: bold 1.2rem/60px "Montserrat"
}

main {
  flex: 1 1 auto;
  min-height: 500px
}

footer {
  background: #ccc;
  flex: 0 0 100px;
  text-align: center;
  font-size: 0.9rem;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

<body>
  <header>
    <h1>Stack Example</h1>
  </header>
  
  <main></main>
  
  <footer >
    <div >
      <div >
        <div >Copyright &copy; myWebsite</div>
        <div ></div>
      </div>
    </div>
  </footer>
</body>

Also if you are going to style elements try to not add dead styling as your footer has text-center and margin auto there isn't no need the margin. But I am guessing you were trying to use the margins to center the element but without defining a width or max-width the margin auto will do nothing. These are things to be aware of plus this removes all the unneeded bloat for any project.

-I hope this is helpful!