这适用于支持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>
解决方法@H_404_18@
这是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上.
In all other browsers that support flexBox,a
flex-direction:columnbased flex container will honor the containersmin-heightto calculateflex-growlengths. In IE10 & 11-preview it only seems to work with an explicitheightvalue.
错误报告 – (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上.
