Setting a footer div to always be at the bottom of the container div regardless of the size of the other elements

Question

I have a container div that contains children.

    <div class='wrapper'>
       <div class='content'></div>
       <div class='footer'></div>
    </div>

The content div can have a dynamic height but the footer div needs to always stick to the bottom.

When I try to set wrapper with

    position: relative

and the footer child with:

    display: absolute;
    bottom: 0;

It only works if I set the height of the wrapper. Also, when resizing the window, the footer disappears.

Is there a way to achieve this behavior with flexbox without using position? i.e. fixed footer and dynamic content?

score 0 · Answer 1 · answered Jan 05 '22 at 16:16

I would suggest using the footer element. Then you can position your footer as either absolute or fixed whatever your preference is, and set bottom: 0; to get it at the very bottom. In this example, I used position: fixed; so it is always in the viewport. I added 200vh on your wrapper just to demonstrate the footer always stays put at the bottom of the viewport when scrolling.

footer {
  position: fixed;
  bottom: 0;
  background-color: grey;
  width: 100vw;
  text-align: center;
  color: yellow;
}

body {
  margin: 0;
}

.wrapper {
  background-color: lightgreen;
  height: 200vh;
}

<div class='wrapper'>
   <div class='content'></div>
</div>
<footer>FOOTER</footer>

score 0 · Answer 2 · edited Jan 05 '22 at 16:36

use position :fixed; :

.content {
  font-size: 4rem;
}

.footer {
  position: fixed;
  bottom: 0;
  background: red;
  text-align: center;
  width: 100%;
  font-size: 2rem;
}

<div class='wrapper'>
  <div class='content'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class='footer'>footer</div>
</div>

En0w1na · Answer 3 · 2022-01-05T16:46:19.403

0

Here is how I have it on all my websites and this will stick footer to the bottom of the page. I believe this is the easiest and best solution without using position:fixed for the #footer, this way content itself will push #footer to bottom, and if there is no content it will still be at the bottom because of min-height:100vh. Notice that 120px is the size of the #footer that is why we need to deduct it from 100vh (of main content).

body {
  height: 100%;
  width: 100%;
  min-width: 320px;
  color:#FFF;
  font-size:18px;  
}

#page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#header {
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
  height: 40px;
  background-color: orange;
}

#content {
  flex: auto;
  min-height: calc(100vh - 120px);
  background-color: yellow;
}

#footer {
  height: 120px;
  background-color: blue;
}

<body>
  <div id="page">
    <div id="header">this is header</div>
    <div id="content">this is content </div>
    <div id="footer">this is footer</div>
  </div>
</body>

You can change position:relative to position:fixed of the #header depending on your liking.

edited Jan 05 '22 at 16:46

answered Jan 05 '22 at 16:29

En0w1na

18
5

This was a good strategy back when, but flexbox makes it obsolete. No need for manual calculations anymore. P.S. the Tidy button in the snippet editor is your friend. :) – isherwood Jan 05 '22 at 16:37
Not sure, I understood your remark or it is wrong. I believe this the most modern and best solution. I would say "position:fixed" is the old and that was used across all the web since the beginning. You can remove the `min-height` but then the person will not see how it pushes the content, because I do not have any content in my HTML example. And yes, my example relies on flexbox. – En0w1na Jan 05 '22 at 16:43
Also I think you wrongly closed this question, since your suggested "duplicates" talk about different things, like `overflow-y:auto` and etc. – En0w1na Jan 05 '22 at 16:49
If you're implementing flexbox correctly you don't need to calculate height. Full-height fill is available. That's my point. You also don't need to explicitly position anything. If there's a better duplicate, feel free to raise it. This is not a new subject. – isherwood Jan 05 '22 at 16:53

Setting a footer div to always be at the bottom of the container div regardless of the size of the other elements

3 Answers3