Have footer be pushed to the bottom without hovering over info

Question

So I want my footer to be at the bottom of my body container. I have position fixed with a bottom: 0; but it still isn't inside the container. I also don't want any info to be pushed underneath my footer.

My goal is to have a footer be at the absolute bottom of the page but not cover anything.

body {
  width: 90%;
  max-width: 1100px;
  min-height: 50vh;
  margin: 15px auto;
  background-color: white;
  border: 3px solid black;
}

footer {
  position: absolute;
  bottom: 0;
  background-color: #333;
  width: 90%;
  border: 3px solid black;
  color: white;
}

<body>
  <main>
    <h1>
      Welcome
    </h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid expedita accusantium officia consequuntur corporis laudantium qui fuga cum, tempore sed.
    </p>
    <hr>
    <p>

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nihil architecto, placeat ducimus natus earum quidem consectetur? Sunt magnam, quas. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus praesentium voluptas, debitis aliquid,
      voluptatem quidem asperiores ex rerum iste eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et vitae, nihil tenetur fuga voluptatibus debitis adipisci, minima eius voluptas id.

    </p>
    <footer>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fuga eius, velit, impedit adipisci doloribus eveniet reiciendis architecto consequuntur reprehenderit.
      </p>
    </footer>
  </main>
</body>

Where's the position fixed? I only see position absolute on footer. if you want it to be on the bottom of the page without covering anything, leave it as ```position:static``` and then place your footer html in the end of the page right before the body tag — Jabberwocky, May 13 '19 at 15:48

score 3 · Answer 1 · answered May 13 '19 at 15:56

There are many ways to approach this problem. Let me list out them.

Fixed footer with padding on the body.
Sticky footer, where it stays bottom always and if there's extra content, it gets pushed further at the end of the content.

Fixed Footer

This is an easier approach, considering the body has a position: relative; by default, all you need to do is, use a position: fixed; on the footer and push it to the end. Give a padding-bottom to the body of slightly above the height of the footer and that's all!

This will not disrupt any content.

body {
  padding-bottom: 50px;
}
footer {
  line-height: 30px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f5f5f5;
  border-top: 2px solid #ccc;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, consectetur sequi. Natus sit iste nemo, dolor dolorum alias repellat, itaque molestiae delectus ipsum commodi perspiciatis architecto, officia at, ducimus. Dolore.</p>
<p>Modi provident officiis accusantium, quasi, quae temporibus soluta excepturi esse veniam sed, debitis nostrum harum? Esse enim dolorem soluta, nisi, voluptatibus cupiditate harum eaque voluptate. Rerum nihil, perspiciatis aliquam nesciunt.</p>
<p>Eum, vitae, praesentium. Consequuntur quae eaque sit quidem illo iste in libero magni natus eveniet quasi ab, velit id culpa tempore non quisquam dolorum doloremque officia, adipisci consectetur laboriosam expedita.</p>
<p>Qui sint, saepe, sapiente recusandae voluptatem iure quisquam. Quos numquam, ut deleniti provident minus dolore eaque, natus unde, voluptatum aperiam suscipit pariatur, cupiditate illum odio alias asperiores quo accusantium quod?</p>
<p>Fugiat harum sit, repudiandae magni cumque aliquid quam praesentium, atque quasi cupiditate nam voluptatum blanditiis. Odio reprehenderit veniam asperiores atque minus eveniet dolor doloribus, mollitia porro eius quod laboriosam dicta?</p>
<p>Quibusdam consequuntur ab aliquam et, a, corporis nisi natus eum placeat accusamus sint! Officiis vero doloremque sapiente, impedit debitis cupiditate repellendus ex commodi fugit sint aliquam molestiae suscipit, perferendis libero!</p>
<p>Tempora id adipisci tenetur aspernatur exercitationem nisi eveniet necessitatibus, itaque suscipit possimus sit minus ullam libero non animi incidunt excepturi accusamus totam molestias molestiae voluptates sed quos autem! Asperiores, optio!</p>
<p>Saepe ex dolorum sapiente eveniet alias et qui perspiciatis, culpa optio error ducimus, tenetur sed exercitationem ullam animi. Eligendi architecto nemo, reiciendis delectus nam quas, neque distinctio voluptatum dolor hic?</p>
<p>Deserunt, esse dolor, accusamus aut officiis illum, tempore aliquam saepe animi voluptas nam deleniti vitae architecto adipisci fugit. Sint ex architecto autem commodi quidem, minima porro obcaecati harum asperiores, itaque.</p>
<p>Error dolores incidunt ut nostrum perspiciatis, veniam. Consequuntur, temporibus dignissimos? Facere accusantium, vel officia, ut sequi nulla impedit alias ex dolores quos perferendis doloremque earum eum. Impedit blanditiis cupiditate, voluptatum!</p>
<p>Unde quae labore, dolor eos inventore porro qui. Eaque excepturi odio eveniet alias, voluptatibus, eius ipsum facere ad. Ullam, voluptas, inventore. Quo eius fugit nulla ipsum quibusdam odit, ullam tempora?</p>
<p>Aut omnis cumque exercitationem tempore harum odit repellendus reprehenderit quibusdam eligendi amet quam consequatur fugiat, cum enim aliquid debitis? Fuga a corporis nemo explicabo id animi nostrum, laudantium similique repellat.</p>
<p>Quasi sed deleniti nemo exercitationem, a beatae cum, vero ex similique omnis rerum perferendis facere tempora sit quaerat voluptatum nam qui temporibus! Numquam fugiat dolorum quia alias hic totam vitae!</p>
<p>Quidem, omnis corrupti tempora architecto. Officiis repudiandae provident ratione quod veritatis a dolor vel sit ullam ex error voluptates, alias itaque distinctio. Deleniti voluptatum, laudantium excepturi tempore. Aut, vero quisquam.</p>
<p>Repellendus rerum veritatis corporis! Exercitationem numquam temporibus asperiores nobis at quod est eius, similique tempore tenetur fugit eum libero beatae laborum. Dolores labore eos ullam reiciendis, repellendus neque vitae alias!</p>
<p>This is the last para!</p>
<footer>
  <p>Copyright &copy; This is Footer!</p>
</footer>

Sticky Footer

The purpose of a sticky footer is that it "sticks" to the bottom of the browser window. But not always, if there is enough content on the page to push the footer lower, it still does that. But if the content on the page is short, a sticky footer will still hang to the bottom of the browser window.

Please refer this: CSS - Sticky footer and Sticky Footer, Five Ways.

score 0 · Answer 2 · answered May 13 '19 at 15:52

0

Just add position:relative to the body and absolute to the footer

body {
    width: 90%;
    max-width: 1100px;
    min-height: 90vh;
    margin: 15px auto;
    background-color: white;
    border: 3px solid black;
    position:relative;
}

footer{
  background:red;
  position:absolute;
  bottom:0;
}

answered May 13 '19 at 15:52

Constantin CT

88
7

1

By default the position of body is relative. – Praveen Kumar Purushothaman May 13 '19 at 15:53
he added min-height to the body 90vh and if you don't put position relative to the body will look messy, please check out yourself – Constantin CT May 13 '19 at 15:56
Yea, I saw it. That's actually bad. – Praveen Kumar Purushothaman May 13 '19 at 15:58
The default `position` is `static`. See [position](https://developer.mozilla.org/en-US/docs/Web/CSS/position#Values) – showdev May 13 '19 at 16:03

score 0 · Answer 3 · answered May 13 '19 at 15:55

You should place footer outside of the main tag.

   <body>
    <main>
      <h1>
      Welcome
      </h1>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid expedita accusantium officia consequuntur corporis laudantium qui fuga cum, tempore sed.
      </p>
      <hr>
      <p>

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nihil architecto, placeat ducimus natus       earum quidem consectetur? Sunt magnam, quas.

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus praesentium voluptas, debitis aliquid,     voluptatem quidem asperiores ex rerum iste eveniet.

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et vitae, nihil tenetur fuga voluptatibus           debitis adipisci, minima eius voluptas id.

      </p>

    </main>

<footer>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fuga eius, velit, impedit adipisci doloribus eveniet reiciendis architecto consequuntur reprehenderit.
      </p>
    </footer>
    </body>

Set position of footer either relative or fixed.

    body {
        width: 90%;
        max-width: 1100px;
        min-height: 50vh;
        margin: 15px auto;
        background-color: white;
        border: 3px solid black;
    }

    footer {
      position: fixed;
      bottom: 0;
      background-color: #333;
      width: 90%;
      border: 3px solid black;
      color: white;
    }

This would do the job!

Have footer be pushed to the bottom without hovering over info

3 Answers3