在div min-height中不显示：table-cell。仅取高度。为什么？ [英] In div min-height not take for display:table-cell .it only take height.why?

问题描述

我给min-height和display：table-cell for div但是min-height没有出现。请给出解决方案。



我尝试了什么：



。数据{

显示：table-cell;

vertical-align：中间;

最小高度：145px;

}

解决方案

min- height 对表元素不起作用，包括 td 。原因是表格单元格将在必要时始终拉伸，因此 height 实际上相当于 min-height 表格单元格。并且 table-cell 使你的元素表现得像 td ，所以在这里计算同样重要。

min-height - CSS | MDN [ ^ ]：

[2]由于错误（错误307866 [ ^ ]）Firefox无法处理 min -Hight 关于元素的元素：table - * 。

此演示 [ ^ 适用于Edge和IE11，但它在Firefox v55，Chrome v60或Opera v47中不起作用。



应用 min-height 到子元素有效，但不尊重 vertical-align 设置：编辑小提琴 - JSFiddle [ ^ ]



在单元格上设置 height ，而不是 min-height ，似乎有效：编辑小提琴 - JSFiddle [ ^ ]



元素的高度仍将增加以适应内容：编辑小提琴 - JSFiddle [ ^ ]

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;
}

解决方案

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.

min-height - CSS | MDN[^]:

[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[^]

这篇关于在div min-height中不显示：table-cell。仅取高度。为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！