CODEWITHSUNDEEP
htmlcssfooter
Chieftain10
Chieftain10

Reputation: 31

How do I ensure the footer is always at the bottom of the page?

I need my footer element to always be located at the bottom of the page (not window) – I have pages with very little content, and some with content that needs scrolling.

Either my footer is in the correct place on the page with lots of content (i.e, you have to scroll to see it) but then in the middle of the window on other pages, or it's at the bottom of the window (not page) for everything [leaving it as is], or it's covering the header on every page [my flexbox attempt].

Here is how each of my pages are structured in HTML:

<html>
<body>
 <div class = "content"></div>
 <div class = "spacer"></div>
 <footer></footer>
</body>
</html>

and here is the relevant CSS [with my flexbox attempt]

body {
    margin: 0;
    padding-left:100px;
    padding-right:100px;

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

footer {
    background-color: lightblue;
    overflow: hidden;
    width: 100%;
    float: right;
    position: absolute;
    padding-left: 100px;

    left: 0;
    right: 0;
    z-index: 1;
    height: 75px; 

    border-top: black 1px;
    border-bottom: 0px;
    border-left: 0px;
    border-right: 0px;
    border-style: solid;

    font-size: 75%;
  }

.spacer {
    flex: 1 0 auto;
  }

As I said, this current code makes the footer cover the header on every page. Adding "bottom: 0;" to the footer element moves it to the correct location for most pages, but only at the bottom of the window for the larger pages, so in the middle when I scroll. Removing the "display: flex; flex-direction: column; min-height: 100vh;" in the body element, and the "flex: 1 0 auto;" from the .spacer element places it correctly on the pages with lots of content, but incorrectly on the smaller ones. I've tried sticky footers, and they don't work. I've tried multiple other solutions on here but none seem to work.

I appreciate this might be hard to follow but I hope I've explained it well enough.

Upvotes: 2

Views: 70

Answers (1)

TermoPollo
TermoPollo

Reputation: 260

This is because you are using position: absolute; on the footer. In this way the footer will be positioned relative to the closest relative parent. In this way it is sufficient that one of the closest elements is position: relative and the position of the footer will therefore be relative to that element.

Since you want to apply padding to the content of the body, you should use the <main> tag and apply the padding to it.

The best solution would be to use position: relative; on the footer and min-height: calc(100vh - <footbar height>); in the main. This way the height of the main will pushes the footbar down.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

main {
  display: flex;
  flex-direction: column;
  padding-left:100px;
  padding-right:100px;
  min-height: calc(100vh - 75px);
}

footer {
    background-color: lightblue;
    overflow: hidden;
    width: 100%;
    float: right;
    position: relative;
    padding-left: 100px;
    z-index: 1;
    height: 75px; 

    border-top: black 1px;
    border-bottom: 0px;
    border-left: 0px;
    border-right: 0px;
    border-style: solid;

    font-size: 75%;
  }

.spacer {
    flex: 1 0 auto;
  }
<html>
  <body>
    <main>
      <div class = "content"></div>
      <div class = "spacer"></div>
    </main>
    <footer>
    
    </footer>
  </body>
</html>

Upvotes: 1

Related Questions