html – 在IE中忽略flex容器min-height

HTML 2019-06-07

据我所知,如果使用IE10 / IE11,我应该可以使用标准化的弹性术语.

我有一个容器div和2个子div.

2个孩子的div不大于400px,所以应该总是有足够的空间来证明内容：空间.

我希望第一个孩子一直在顶部,第二个孩子一直在底部.

这适用于Chrome和Firefox,但不适用于IE,我不知道为什么.

欢迎任何评论和反馈.

<div style="display: flex; flex-direction: column; justify-content: space-between; min-height: 400px; background-color: lightyellow;">
  <div style="background-color: red;">
    <h2>Title (variable height)</h2>
    <p>Summary (variable height)</p>
  </div>
  <div style="background-color: orange;">
    <img src="http://avatarBox.net/avatars/img32/tv_test_card_avatar_picture_61484.jpg" />
  </div>
</div>

https://jsfiddle.net/akxn68vm/

解决方法

IE 10& 11有正确渲染flexBox的许多问题.

这是一个：Flex容器不尊重这些浏览器中的min-height属性.

一个简单的解决方案是使您的Flex容器也成为弹性项目.

只需将其添加到您的代码中(无需其他更改)：

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

revised fiddle

elasticsearch扩展ik分词器词库

操作步骤 1、进入elasticsearch的plugin，进入ik。进入config。 2、在config下面建立以.dic为后缀的字典...

echarts中legend如何换行

lengend data数据中若存在''，则表示换行，用''切割。

Echart常用效果（一）

代码实现 option = { backgroundColor: &#39;#080b30&#39;, tooltip: { trigger: &...

freemarker中js里面取字符串，换行导致报错的解决办法

问题原因原因在于直接在js中取的变量并复制给var变量。于是就变成这样。解决办法 var data = &#...

Freemarker + xml 实现Java导出word

前言最近做了一个调查问卷导出的功能，需求是将维护的题目，答案，导出成word，参考了几种方案之后，选...

【前端HTML】常用特殊字符编码对照表以及其对应英文

对于很多人来说，用字符编码都是熟能生巧，而不清楚为什么是那样的字符编码，所以我在这列了一个表，翻...

html – 在IE中忽略flex容器min-height

解决方法

相关文章