css – Flexbox,min-height,margin auto和Internet Explorer

我用它来同时显示：flex和margin：auto来实现这种布局：

这适用于支持FlexBox的每个浏览器,甚至是IE.
但是,如果没有一点例外,那就太容易了：最小高度.

你可以在这里找到一个简单的工作示例.在我的包装器上使用min-height时,最后一个元素不会被推到这个包装器的底部(仅限IE).

我无法得到这个,你们女孩/男人有什么想法吗？谢谢.

在IE11上测试

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  
  border: 1px solid grey;
  padding: 5px;
}
.element {
  height: 35px;
  
  border: 1px solid grey;
  margin: 5px;
}
.element:last-child {
  margin-top: auto;
}

<div class="wrapper">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

解决方法

这是IE的flexBox实现中的一个错误：

In all other browsers that support flexBox,a flex-direction:column based flex container will honor the containers min-height to calculate flex-grow lengths. In IE10 & 11-preview it only seems to work with an explicit height value.

错误报告 – (https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview#tabs)

这似乎是微软的关注点,未来将在某些方面得到修复：

Unfortunately,we are not able to address this Feedback in our upcoming release. We will consider your Feedback for a future release. We will keep this connect Feedback bug active to track this request.

微软的回复 – (https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview#tabs)

目前,简单的解决方案是使用高度：

.wrapper {
  border: 1px solid grey;
  Box-sizing: border-Box;
  display: flex;
  flex-direction: column;
  height: 300px;
  padding: 5px;
}
.element {
  border: 1px solid grey;
  height: 35px;
  margin: 5px;
}
.element:last-child {
  margin-top: auto;
}

<div class="wrapper">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

但是这有限制,如果添加更多.elements,盒子不会增长,所以可能不是你想要的.

虽然确实需要一个额外的包含元素,但似乎确实有一种实现这种方式的方式：

.container {
  display: table;
  min-height: 300px;
  width: 100%;
}
.wrapper {
  border: 1px solid grey;
  Box-sizing: border-Box;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 300px;
  padding: 5px;
}
.element {
  border: 1px solid grey;
  height: 35px;
  margin: 5px;
}
.element:last-child {
  margin-top: auto;
}

<div class="container">
  <div class="wrapper">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
</div>

这会添加一个容器(.container),将其设置为display：table;并给它max-height：300px;.身高：100％;然后添加到.wrapper以使其适合.container的整个高度(实际为300px),从而使IE的行为与其他浏览器相同.

兼容的浏览器会忽略这一点,并将继续遵循最小高度：300px;规则设置在.wrapper上.