CSS显示:table min-height无法正常工作

Question

有谁知道我可以使用最新的浏览器进行最小高度的工作？我正在使用CSS表,它似乎忽略了最小高度.

<div style="background-color: red; display: table; min-height: 100px;">
abc
</div>

Answer 1

使用表时,高度基本上是最小高度,因为表总是拉伸.只需摆脱"min-",它就会像你期望的那样工作.

这是完全不直观的,但是现场观察.最好的结果似乎是将"固定"高度放在最里面的`display:table-cell`元素上. (13认同)
我没有在IE中测试,但似乎Firefox是唯一仍然受此影响的人. (4认同)
确认在Mac上的Chrome 37，Safari 7和FF 32中`height`起作用并且`min-height`不起作用。Win 8.1上的IE11都提供了正确的行为。http://jsfiddle.net/nuwcyvwn/1/ (2认同)

Answer 2

使用height: 1px;表或任何值.基本上你需要给桌子一些高度才能使它适用min-height.只有min-height不能在firefox上的表上工作.

Answer 3

火狐浏览器解决方案

添加高度以解锁设置最小高度

div {
    display: table;
    width: 100%;
    height: 0;
    min-height: 100px;
}

height 中的数字可以是小于或等于 min-height 的任何其他实际值，以使其按预期工作。