Flexbox Sticky Footer Issue?

StackOverflow https://stackoverflow.com//questions/23026696

Question

I have been playing around with Flexbox to try and make a sticky footer, but some reason, one of my divs is overlapping the footer? When i drag the window to a larger monitory, the footer is perfect. What am i doing wrong?

Also, i would prefer to use this method instead of other methods, such as the table method.

Here is my Html layout:

<body>
    <div class="mainContent">...</div>
    <div class="footer">...</div>
</body>

Inside my mainContent div i have the complete top portion of my website, including the header. I just need to use that as the entire Content and then have my footer.

Here is the CSS i have:

body
{
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100vh;
}

.mainContent
{
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-flex: 1;
}

.footer
{
    height: 75px; 
    background: #222;
    color:#EEE;
}

I have even tried this: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

But i get the same issue as what i currently am encountering.

UPDATE

As requested in the comments, i set my main content div to overflow: auto; but my content was covered up by the footer. How would i fix this?

Was it helpful?

Solution

You need to add a few more rules into your css to get the result you seek. As it is now, it is basically stating that when the space gets reduced, your main content should take more space. Therefore, the footer does not really gets overlapped but rather its size decreases.

Here is something I had done a few months ago... A lot of rules in the css are legacy so be careful but I believe it is close to what you aim to do : http://plnkr.co/edit/o2BAwvg3XV4YjwAwwmYR?p=preview

But really I encourage you to use this to create your flex css rules : http://the-echoplex.net/flexyboxes/

OTHER TIPS

I spent a lot of time before if found these quick and robust solutions using CSS3 Flexbox or Grid to solve this problem. I hope this helps. 

<body>
  <header></header>
  <main></main>
  <footer></footer>
</body>

This should work for both for IE and Chrome:

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

main {
  flex: 1 0 auto;
}

footer, header {
    flex-shrink: 0;
}

You can also try Grid Layout by

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr auto;
}

footer {
  grid-row: 3/4;
}

Refer my website: http://matthiassommer.it/web/javascript/sticky-footer-css3-flexbox-grid/

I know an answer has already been accepted, but I have here a very simple example using just the code you need (and some javascript to demonstrate).

https://codepen.io/alexmccabe/pen/RgMBjJ

Here is what is happening:

First you set the body and the html to 100% of the browser height.

html,
body { height: 100%; }

Then you set a wrapper element to have a min-height of 100%, and to display flex. The column makes sure the elements don't get placed next to each other.

.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

And now the footer gets margin-top of auto. This sits it at the bottom of the browser window.

.site-footer {
    margin-top: auto;
}

Note: Make sure that you include any old browser styles, and watch out for Safari 8. That can be a tricky one sometimes.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top