在表格中設置「最大高度」使其高度爲零？

這裏是片段（演示上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屬性而不是它的包裝器（匿名錶格單元格框），我不認爲這會導致未定義的行爲。這是真的嗎？ –

在表格中設置「最大高度」使其高度爲零？

回答

相關問題