Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sticky footer doesn't work at all in IE11 and not well in Chrome #28

Closed
borekb opened this issue May 28, 2014 · 18 comments

Comments

Projects
None yet
8 participants
@borekb
Copy link

commented May 28, 2014

Took the demo code here: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ and observed a couple of things:

  • The footer is not pushed down in IE11 and overlays the body section
  • In Chrome and Firefox, scrollbar is drawn unnecessarily (part of the footer is under the fold)
@philipwalton

This comment has been minimized.

Copy link
Owner

commented May 31, 2014

I'm not seeing what you're describing. Can you upload a screenshot or something? I'm using Chrome on Mac and it works just fine.

@robertmclaws

This comment has been minimized.

Copy link

commented Jun 3, 2014

Here you go:
sticky-ie11

@philipwalton

This comment has been minimized.

Copy link
Owner

commented Jun 3, 2014

That is a known bug in IE, do you have an example to show the Chrome/FF behavior?

@philipwalton

This comment has been minimized.

Copy link
Owner

commented Jul 8, 2014

Closing for now. Feel free to reopen if you can send me a Chrome/FF test case.

@cdukes

This comment has been minimized.

Copy link

commented Aug 27, 2014

I encountered this issue when trying to implement the sticky footer. In my case, the solution here was what I needed.

I also noticed that the sticky footer example flips between min-height: 100vh; in the text and min-height: 100%; in the source

@philipwalton

This comment has been minimized.

Copy link
Owner

commented Aug 28, 2014

I also noticed that the sticky footer example flips between min-height: 100vh; in the text and min-height: 100%; in the source

Yes, I wanted to use 100vh to show the ideal case in the docs. Though, at this point in time 100% is still needed to deal with some browser bugs (or at least it was when I created the site).

@philipwalton

This comment has been minimized.

Copy link
Owner

commented Aug 28, 2014

I just got a notice that this bug has been fixed internally. I don't know when it'll be released or which versions will get it, but I assume it will at least work correctly in IE 12.

http://connect.microsoft.com/IE/feedbackdetail/view/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview

@robertmclaws

This comment has been minimized.

Copy link

commented Aug 30, 2014

OK, so I got it working in IE11 too. I may submit a PR to this repo with the fix.

So now the question is, how would you modify the demo so that the sticky footer is always at the bottom, and the center content is scrollable?

Thanks!

@cdukes

This comment has been minimized.

Copy link

commented Aug 30, 2014

Wouldn't that just be position: fixed; bottom: 0 - no flexbox required?

@robertmclaws

This comment has been minimized.

Copy link

commented Aug 30, 2014

AFAIK (and I'm not a CSS expert) not if you don't want the 2nd row (the body row) to overlap the bottom div. I could be wrong.

@ElijahFowler

This comment has been minimized.

Copy link

commented Sep 2, 2014

@advancedrei Sticky footer with center scrolling only? Here you go: codepen

I'm sure there's a way to make that more dynamic, but I haven't the time to play with it at the moment, but on the off chance that it might help your present need I thought I would share.

@greypants

This comment has been minimized.

Copy link

commented Sep 10, 2014

@advancedrei care to share how you got it working in IE11?

@marcobarbosa

This comment has been minimized.

Copy link

commented Nov 17, 2014

@advancedrei I'm also interested to know how/if you got it working in IE11. This is such a clean solution for a sticky footer yet IE just had to ruin it :/

@ElijahFowler Your solution seem to require a fixed sized footer (142px in your example)

@marcobarbosa

This comment has been minimized.

Copy link

commented Nov 24, 2014

FWIW setting "height: 100%" in the .Site class in the demo seem to do the job for both IE10-11.

So I'd change it to something like:

height: 100%; /* for IE to behave */
min-height: 100vh;

I'd be happy to make a pull request if somebody else can confirm this.

@philipwalton

This comment has been minimized.

Copy link
Owner

commented Nov 24, 2014

@marcobarbosa setting height: 100% will cause other browsers to break. And with IE11, there's no good way to conditionally add CSS.

@marcobarbosa

This comment has been minimized.

Copy link

commented Nov 24, 2014

@philipwalton I agree that body should not have height: 100% but surely you could work around this if .Site becomes a container?

  html {
    height: 100%;
  }
  body {
    min-height: 100%;
  }
  .Site {
    display: flex;
    min-height: 100vh;
    height: 100%;
    flex-direction: column;
  }
  .Site-content {
    flex: 1;
  }
<body>
  <div class="Site">
    <header>...</header>
    <main class="Site-content">...</main>
    <footer>...</footer>
  </div>
</body>

If .Site is min-height: 100vh already, do you think it's a bad idea to make it height: 100% too? Which browsers would this break?

Also targeting IE11 only can be difficult but something like this would target both IE10 & IE11:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
}

I apologise in advance for bumping a closed thread but this is an interesting solution and I would like to help out. Love this project!

@philipwalton

This comment has been minimized.

Copy link
Owner

commented Nov 24, 2014

@marcobarbosa feel free to submit a pull request if you want, and we can move the discussion over there.

I wasn't aware of that media query (actually I've never really looked into it), but if it really does target just IE, I'd be happy to include it in the source (though not in the page samples for obvious reasons).

If you do submit a pull request, please reference this issue so others can find it.

philipwalton added a commit that referenced this issue Dec 14, 2014

Merge pull request #36 from marcobarbosa/master
sticky-footer in IE + a few extras for #28

jameslnewell referenced this issue in nib-styles/grow-layout Feb 15, 2016

@Alex-Golovin

This comment has been minimized.

Copy link

commented Oct 24, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.