1

My page looks exactly like this

<article>
    <header>header</header>

    <section>section</section>

    <footer>footer</footer>
</article>

Although this might look too easy, I need it to do 3 things:

1) If the section is smaller than the available height, the footer should be at the bottom (and if the section gets bigger, the footer will simply be at the end (scrolling) of the page): DEMO

2) It should work in IE10 (check the demo in IE10 and you'll see that flexbox doesn't work very well: DEMO

3) Finally, if a huge modal dialog is shown (very tall) the footer should be at the bottom of the page: DEMO

Any help would be appreciated!!

Jeanluca Scaljeri
  • 26,343
  • 56
  • 205
  • 333

1 Answers1

1

It seems like you've accomplished Item #1 already. flex-grow is the right way to go, in my view.

For Item #2, try adding vendor prefixes to your CSS, which are necessary for flexbox to work in IE10 (and Safari 8). See browser support info here: http://caniuse.com/#search=flex

For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.

Also note that IE10 does not support the current flexbox specification.

It only supports the old "tweener" syntax, which almost no other browser uses.

Bottom line regarding IE10:

The March 2012 [tweener] draft does not have an equivalent for flex-grow, flex-shrink, or flex-basis -- these properties can only be set via the flex shorthand property.

Source: https://stackoverflow.com/tags/flexbox/info

For Item #3, I'll need to work on that when I have more time. Maybe somebody can't help you in another answer. Just keep in mind the modal in your code is absolutely positioned, which means it has been removed from the document flow, and the footer doesn't even know it exists.

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Thanks a lot for helping. I've updated the demo for item2 and I still have the layout issue (You're right about item 1 :) – Jeanluca Scaljeri Jan 11 '16 at 20:13
  • Instead of `flex-grow`, try using the `flex` shorthand. See my revised answer. – Michael Benjamin Jan 11 '16 at 20:22
  • Not exactly sure what the shorthand notation of `flex-grow: 1` is. But according to the documentation I get the impression it should be: `flex: 1` ? [jsfiddle](https://jsfiddle.net/1rma8167/8/) But this even looks worse in IE :( – Jeanluca Scaljeri Jan 11 '16 at 20:45
  • I'll look a bit more later, but it appears that ie10 and flexbox don't play well together: http://stackoverflow.com/q/18711282/3597276 – Michael Benjamin Jan 11 '16 at 20:59
  • and note this detailed article from Microsoft, as well.. https://msdn.microsoft.com/library/hh673531(v=vs.85).aspx – Michael Benjamin Jan 11 '16 at 21:00
  • Item #2 is easily fixed without flexbox, but simply use `min-height`: [jsfiddle](https://jsfiddle.net/1rma8167/12/). So, item #3 is still open, but maybe the best thing we can do is set the dialog to a max-height of 100% and make it scrollable ([jsfiddle](https://jsfiddle.net/1rma8167/13/)) Let me know if you have a better solution!! – Jeanluca Scaljeri Jan 12 '16 at 12:37
  • In researching for an item3 solution, I found this article. Hopefully it helps: http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/ – Michael Benjamin Jan 12 '16 at 12:52