CSS显示：表格最小高度不起作用

104

有谁知道我可以使最新的浏览器达到最小高度？我正在使用CSS表，它似乎忽略了最小高度。

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

小提琴

css

— 萨曼莎JT星
source

1

类似的帖子：stackoverflow.com/questions/25238/100-min-height-css-layout

— diEcho 2011年

1

您可以定义CSS表吗？有一些标记吗？

— Alex

1

发布您的html，相应的CSS，并在可能的情况下提供指向您网站的链接（或尝试构建jsfiddle.net）以显示您的问题。

— oezi 2011年

尽管自从14年以来就报告了该错误，但是FireFox仍然遇到问题。bugzilla.mozilla.org/show_bug.cgi?id=307866

— 弗雷德里克

204

使用表时，高度本质上是最小高度，因为表始终会拉伸。摆脱掉“ min-”，它将按您期望的那样工作。

— 滑行者
source

13

这是完全不直观的，但是很实际。最好的结果似乎是将“固定”高度放在最里面的display: table-cell元素上。

— eternicode

4

我尚未在IE中进行过测试，但似乎Firefox是唯一仍受此影响的浏览器。

— Dex 2014年

2

确认可以height正常使用，min-height但不适用于Mac上的Chrome 37，Safari 7和FF 32。Win 8.1上的IE11都提供了正确的行为。jsfiddle.net/nuwcyvwn/1

— Stephan Muller

1

不对。如果我想要一张桌子至少高8英寸（我使用css进行打印控制）并且它没有足够的行来填充它，但是我定义了一个脚，可以在定义时提供一个间隔行（允许垂直拉伸）确保我的其他行没有高，并且我得到的是一个很大的空隙，使我的页脚保持在应该的位置。在Chrome浏览器中效果很好，但不适用于FF或我正在使用的PDf转换器；wkhtmltopdf。是的，高度有效，但在语义上与最小高度并不意味着同一件事。

— rainabba'2

7

height: 1px;在表上使用或任何值。基本上，您需要给桌子增加一些高度以使其可以使用min-height。仅min-height在Firefox上的表上不起作用。

— virajs0ni
source

4

OP正在询问如何使其与最新的浏览器一起使用。我只是给了他一个解决方案。怎么不准确？

— virajs0ni 2015年

像您所说的，给定高度，例如height：1px，然后它开始工作

— Mohamed Hussain

1

每当您使用display:table;或更深入的属性（例如，display:table-cell;使用）时height，请考虑使用min-height。如表中所示，高度=最小高度（考虑到其中的自动跨度功能）。

— 艾哈迈德·阿威斯（Ahmad Awais）
source

1

Firefox解决方案

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

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

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

— 迈克·温彻斯特
source