113

Does anyone know I can make min-height work with the latest browsers? I am using CSS tables and it seems to ignore min-height.

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

Fiddle

Samantha J T Star
  • 30,952
  • 84
  • 245
  • 427
  • 1
    similar post : http://stackoverflow.com/questions/25238/100-min-height-css-layout – xkeshav Oct 17 '11 at 06:46
  • 1
    Can you define *CSS tables*? Got some markup? – alex Oct 17 '11 at 06:46
  • 2
    post your html, the according css and, if possible, give a link to your site (or try building a http://jsfiddle.net/) to show up your problem. – oezi Oct 17 '11 at 06:55
  • This is still a trouble with FireFox, although the bug is reported since fourteen years. https://bugzilla.mozilla.org/show_bug.cgi?id=307866 – Frédéric Jul 25 '19 at 08:13

4 Answers4

211

When using tables, height essentially is min-height, as tables always stretch. Just get rid of the "min-" and it will work as you expect.

swider
  • 3,374
  • 2
  • 27
  • 40
  • 13
    This is completely unintuitive, but spot-on. Best results seem to come with putting the "fixed" height on the innermost `display: table-cell` elements. – eternicode Jul 09 '12 at 16:14
  • 4
    I haven't tested in IE but it seems Firefox is the only one still affected by this. – Dex Jun 07 '14 at 04:13
  • 2
    Confirmed that `height` works and `min-height` doesn't in Chrome 37, Safari 7 and FF 32 on mac. IE11 on Win 8.1 gives the correct behavior in both. http://jsfiddle.net/nuwcyvwn/1/ – Stephan Muller Sep 23 '14 at 11:54
  • 1
    Not true. If I want a table to be AT LEAST 8in tall (I use css for print control) and it lacks enough rows to fill it, but I have a tfoot defined, I can provide a spacer row (allowed to stretch vertically), while defining height on my other rows to ensure they do not and what I get is a big gap that keeps my footer where it should be. Works great in Chrome, but not FF or the PDf converter I'm using; wkhtmltopdf. Yes, height works, but doesn't mean the same thing semantically as min-height. – rainabba Feb 04 '16 at 01:54
8

Use height: 1px; on the table or any value. Basically you need to give table some height to make it work with min-height. Having only min-height won't work on tables on firefox.

andi
  • 6,442
  • 1
  • 18
  • 43
virajs0ni
  • 126
  • 1
  • 6
5

Solution for Firefox

Add height to unlock setting the min-height

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

The number in height can be any other real value less or equal to min-height for making it work as expected.

Mike Winchester
  • 51
  • 1
  • 2
1

Whenever you are using display:table; or any deeper property like display:table-cell; consider using height instead of min-height. As in tables height = min-height considering the auto-span feature in them.

Ahmad Awais
  • 33,440
  • 5
  • 74
  • 56