Click here to Skip to main content
15,867,771 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I give min-height and display:table-cell for div but min-height not appear.please give solution.

What I have tried:

.data{
display: table-cell;
vertical-align: middle;
min-height: 145px;
}
Posted
Updated 18-Aug-17 7:00am
v2
Comments
[no name] 18-Aug-17 12:33pm    
jgakenhe 18-Aug-17 12:35pm    
It worked for me. What browser are you using? If your using IE in Compatbility View or IE6, it probably won't work because old versions of IE don't like min-height.

min-height doesn't work on table elements, and that includes td. The reason is that a table cell will always stretch if necessary, so height actually is the equivalent of min-height for a table cell. And table-cell makes your element behave like td, so it makes sense that the same counts here.
 
Share this answer
 
v3
Comments
Richard Deeming 18-Aug-17 13:03pm    
You beat me to it! :)
Thomas Daniels 18-Aug-17 13:05pm    
:) Also +5 for your reference! I hadn't found that
[2] Due to bug (bug 307866[^]) Firefox doesn't handle min-height on elements with display: table-*.

This demo[^] works in Edge and IE11, but it doesn't work in Firefox v55, Chrome v60, or Opera v47.

Applying the min-height to a child element works, but doesn't respect the vertical-align setting: Edit fiddle - JSFiddle[^]

Setting the height on the cell, instead of the min-height, seems to work: Edit fiddle - JSFiddle[^]

The element's height will still increase to fit the content: Edit fiddle - JSFiddle[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900