Flexbox，最小高度和IE11 [英] Flexbox, min-height and IE11

问题描述

我试图用flexbox做一个简单的设计，但是我遇到了IE11的麻烦。基本上，我只想要一个只有在内容不够高的情况下才能贴到底部的页脚。我没有这样做与铬这样的问题：

$ b

*，*：之后，*：{box-sizing：border-box;} html，body {height：100％;保证金：0; padding：0;} body {display：flex; flex-direction：column;} main {flex：1;}

<报头GT;报头LT; /报头><主> < p为H.主< / p为H. < p为H.主< / p为H. < p为H.主< / p为H. < p为H.主< / p为H. < p为H.主< / P>< /主><页脚> Footer< / footer>

c $ c>< p> main< / p>< / code>来看IE11的错误行为。没有JavaScript？

解决方案

IE有一个 min-height 在Flex列容器父级上显示，在这种情况下 html

小提琴演示

更新像这样的CSS

*，*：after，*：before {box -sizing：border-box;} html，body {margin：0; display：flex;} body {flex-direction：column; min-height：100vh;} main {flex-grow：1;}

 <报头GT;报头LT; /报头><主> < p为H.主< / p为H. < p为H.主< / p为H. < p为H.主< / p为H. < p为H.主< / p为H. < p为H.主< / P>< /主><页脚> Footer< / footer>  

I'm trying to make a simple design with flexbox but I'm having trouble with IE11. Basically, I want a footer that sticks to the bottom only if the content is not high enough. I have no issue doing that with Chrome like this:

*,
*:after,
*:before {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

<header>
  Header
</header>
<main>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
</main>
<footer>
  Footer
</footer>

Just play with the number of <p>main</p> to see the wrong behaviour with IE11.

Is there a way to achieve this without JavaScript?

解决方案

IE has a min-height bug and needs display: flex on the flex column containers parent, in this case the html

Fiddle demo

Update your CSS like this

*,
*:after,
*:before {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  display: flex;
}
body {
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex-grow: 1;
}

<header>
  Header
</header>
<main>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
</main>
<footer>
  Footer
</footer>

这篇关于Flexbox，最小高度和IE11的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！