Hunter Mitchell Hunter Mitchell - 1 month ago 7
CSS Question

Flexbox Sticky Footer Issue?

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?

Answer Source

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/