1

I made a standard layout for a webpage that has a header, sidebar, main content area, and a footer. I'm using flex, and min height, and all browsers I've used it looks great, except when I go on IE. I am running IE11, and according to caniuse.com all the css that I am using is available for IE11. The problem I am having with ie, is the area that I have min-height:100%; will have a height of what looks like 0. If I change min-height to height it will look good until I get to a page where the content has more height than 100%. I was able to recreate this in jsfiddle:

http://jsfiddle.net/xwc60dzv/

If I can provide any additional info I will do my best.

Joe W
  • 1,567
  • 6
  • 23
  • 36
  • 1
    I couldn't fix this myself, hence a comment, but [this SO post](http://stackoverflow.com/questions/26596813/internet-explorer-doesnt-honor-my-min-height-100-with-flexbox) and [this blog from a Google Engineer](http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/) seem to address the same issue and might prove helpful. – Equalsk Aug 20 '15 at 15:47
  • Thank you for the comment, I am attempting to use the info in the links you provided. Will update if proves successful. – Joe W Aug 20 '15 at 16:11

1 Answers1

0

Going off the links that Equalsk provided I was able to take the css and add my own into it to recreate the same look as I had originally. Can be seen here:

http://jsfiddle.net/gbsrcwb5/1/

Biggest difference I see is that it got rid of the wraper changed and place the display in the body the min height to 100vh

Joe W
  • 1,567
  • 6
  • 23
  • 36