CODEWITHSUNDEEP
htmlcssmodal-dialogflexbox
Jeanluca Scaljeri
Jeanluca Scaljeri

Reputation: 29159

Multiple issues with flexbox and min-height 100vh

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!!

Upvotes: 1

Views: 891

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371679

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.

Upvotes: 1

Related Questions