在表格中设置“最大高度”使其高度为零？

这里是片段（演示上JsFiddle提供）在表格中设置“最大高度”使其高度为零？

#outer { 
 
    display: table; 
 
    height: 200px; 
 
    width: 100%; 
 
    background: gray; 
 
} 
 

 
#inner { 
 
    width: 100%; 
 
    background: blue; 
 
    max-height: 100%; 
 
}

<div id="outer"> 
 
    <img id="inner" src="http://jsfiddle.net/img/logo.png"> 
 
</div>

父元素使用display:table（由第三方框架集），我在子元素设置max-height:100%限制。

然而，如在上面的演示（我使用Chrome 46.0）可以看出，子元素的高度为“0”不知为什么...

当我在父元素中取出display:table属性，一切正常再罚款。

我检查了MDN document for max-height。当提到最大高度的百分比值时，它会说：

百分比是根据生成的框的包含块的高度计算的。如果没有明确指定包含块的高度（即，它取决于内容高度），并且该元素没有被绝对定位，则将百分比值视为无。

据我了解我的演示中，#inner元素的包含块显式地指定到#outer，所以在#inner的max-height: 100%属性将等同于height: 200px。这是真的吗？有人对我出错的地方有什么想法吗？

谢谢！

来源

2015-10-24 Hanfei Sun

使用'min-height'。 http://jsfiddle.net/fb1ddrf8/1/ – Ferrrmolina

@Ferrrmolina我认为'min-height：100％'相当于'min-height：0'，这在这里没有任何意义。 –

看看这个答案：http：//stackoverflow.com/questions/14262938/child-with-max-height-100-overflows-parent – MCain

当您有一个父元素和一个子元素，并且父元素是display: table时，该子元素隐含地为display: table-cell。（从技术上说，子元素被包装在一个anonymous table-cell box中，而实际的子元素本身不会改变，但在这种特定情况下，它并没有什么区别。）

所以你试图在表上设置max-height单元格，在这一点上你冒险进入undefined behavior：

在CSS 2.1，上表，内联表格，表格单元格，表行“最小高度”和“最大高度”的效果，行组未定义。

对于它的价值，只有Chrome浏览器出现这个问题;图像按照预期在Firefox和IE中显示。尽管如此，很难说哪个浏览器是对还是错。

据我了解我的演示中，#inner元素的包含块显式地指定到#outer，所以在#inner的max-height: 100%属性将等同于height: 200px。这是真的吗？有人对我出错的地方有什么想法吗？

没有，一个表格单元格的包含块不表本身，而是包含块表的，由于表是一个表，而不是块容器箱。见section 10.1：

对于其它元件，如果该元素的位置是“相对”或“静止”，包含块由最近的块容器祖先的内容边缘形成框。

基于什么MDN和规范说的max-height（的话几乎一模一样），所使用的max-height应该是none。无论出于何种原因，Chrome都将其调整为零。无论是故意将这个问题带回家，讨论未定义的行为（因为Firefox非常喜欢使用表格元素）或者是由于无意的浏览器怪癖引起的争论，但我建议您查找由第三方框架施加的display: table限制的一些其他解决方法。

来源

2015-10-24 03:08:45 BoltClock

谢谢，但有一件事我不明白：当我在浏览器中检查时，'＃inner'的display'的计算值是'inline'而不是'table-cell'。当我设置' '＃inner'元素的max-height属性而不是它的包装器（匿名表格单元格框），我不认为这会导致未定义的行为。这是真的吗？ –

在表格中设置“最大高度”使其高度为零？

回答

相关问题