Internet Explorer doesn't honor my min-height: 100% with flexbox

前端未结

关注

 6  1704

I\'ve been looking through all the min-height: 100% solutions on StackOverflow and the web and I can\'t seem to find one that fits my (relatively simple) needs.

Here\'s

相关标签:

6条回答

悲哀的现实

2021-02-01 21:27

Here is the fix:

HTML

<body>
  <header>Header</header>
  <main>Here comes the content ...</main>
  <footer>Footer</footer>
</body>

CSS

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
header, footer {
  flex-shrink: 0;
}
main {
  flex: 1 0 auto;
}

jsfiddle: http://jsfiddle.net/d5syw3dc/

0 讨论(0)

耶瑟儿～

2021-02-01 21:33
There is another solution for this problem.

In your case you can use pseudo element to stretch row:

First of all use 100vh instead of 100%
```
.container {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}
```
After that just add pseudo element to .container with exactly same height value
```
.container::after{
  content: '';
  height: 100vh;
  visibility: hidden;
}
```
Here, see my codepen http://codepen.io/anon/pen/LVazgQ
0 讨论(0)
发布评论:

提交评论
- 加载中...
醉酒成梦

2021-02-01 21:34

EDIT: Thomas's answer shows a way to achieve what I wanted without using min-height, which means it works fine on IE.

I ended up solving this issue with Javascript, although I admit it's absolutely nasty code and a pretty implementation-dependant solution. Whenever my main content element changes in size, I turn off the height property, measure the container to decide if the height property is actually necessary, and then replace it if needed. It's as if I wrote my own implementation of min-height. A major downside of this approach is that IE doesn't give proper events when elements change size or when content changes within an element, and without these events, you need to use a setInterval timer and measure the element yourself. Gross.

In addition to my own solution, I spoke with the folks on the IE team who work on flexbox. They acknowledged that the bug still exists in production today, but still urged me to find a way to fix it without JS. The one lead they gave me was to use the IE-specific -ms-grid layout. I'm unfamiliar with these, but I'll report back and update this answer if I have time to investigate.

0 讨论(0)
发布评论:

提交评论
- 加载中...
暖寄归人

2021-02-01 21:40
USE height: 100% for IE

IE will ignore min-height property here, but chrome will pick it.

i am not sure about the reason but i hope it works fine.
```
.container {
  display: flex;
  align-items: stretch;
  height: 100%;
  min-height:100%;
}
```
Codepen

http://codepen.io/anon/pen/KDJjC
0 讨论(0)
发布评论:

提交评论
- 加载中...

青春惊慌失措

2021-02-01 21:41

Having the children of your display: flex element inherit the min-height was a quick solution for me on IE, without adding any extra elements. It also works as expected with overflow.

HTML:

<div class="container">
  <div class="col-1">Col 1</div>
  <div class="col-2">Col 2</div>
</div>

CSS:

body {
  margin: 0;
  min-height: 100vh;
}

.container {
  min-height: inherit; /* or 100vh or whatever you want */
  display: flex;
}
.container > * {
  min-height: inherit; /* use the full height of the container, works with overflow */
}

.col-1 {
  background: red;
  flex-grow: 1; /* half the screen width */
}
.col-2 {
  background: blue;
  flex-grow: 1; /* half the screen width */
}

0 讨论(0)

深忆病人

2021-02-01 21:48

min-height is not working in IE10/11 when it's associated with a flex layout (check the bug report). Use another flex container to fix it.

Edit: Just figured out I wasn't answering the original post, misled by the upvoted answer. So here we go:

Two columns layout

HTML

<div class="ie-fixMinHeight">
    <div id="page">
        <div id="sidebar"></div>
        <div id="content"></div>
    </div>
</div>

CSS

.ie-fixMinHeight{
    display:flex;
}

#page {
    min-height:100vh;
    width:100%;
    display:flex;
}

#content {
    flex-grow:1;
}

Don't use flexbox layout directly on body cause it screwed up elements inserted via jQuery plugins (autocomplete, popup, etc.).

Here the fixed layout based on your code.

Sticky footer

HTML

<div class="ie-fixMinHeight">
    <div id="page">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</div>

CSS

.ie-fixMinHeight {
    display:flex;
}

#page {
    min-height:100vh;
    width:100%;
    display:flex;
    flex-direction:column;
}

#content {
    flex-grow:1;
}

See a working demo.

0 讨论(0)