CSS display: table min-height not working

Css

Css Problem Overview

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

Css Solutions

Solution 1 - Css

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.

Solution 2 - Css

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.

Solution 3 - Css

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.

Solution 4 - Css

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.

Categories
Recommended Css Solutions

Previous Solution:

List distinct values in a vector in R

RVectorDistinct ValuesR Faq

Next Solution:

When should the xlsm or xlsb formats be used?

ExcelExcel 2007XlsmXlsb

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSamantha J T StarView Question on Stackoverflow
Solution 1 - CssswiderView Answer on Stackoverflow
Solution 2 - Cssvirajs0niView Answer on Stackoverflow
Solution 3 - CssMike WinchesterView Answer on Stackoverflow
Solution 4 - CssAhmad AwaisView Answer on Stackoverflow