据我所知,如果使用 IE10/IE11,我应该能够使用标准化的 flex 条款。
我有一个容器 div 和 2 个子 div。
2 个子 div 不大于 400 像素,因此应该始终为 justify-content: space-between
留出足够的空间。
我希望第一个 child 一直在顶部,第二个 child 一直在底部。
这在 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>
最佳答案
IE 10 和 11 在正确渲染 flexbox 方面存在许多问题。
这是一个: flex 容器不遵守这些浏览器中的 min-height
属性。
一个简单的解决方案是让您的 flex 容器也成为一个 flex 元素。
只需将此添加到您的代码中(无需其他更改):
body {
display: flex;
flex-direction: column;
}
关于html - IE 忽略 flex 容器最小高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43343250/