Safari高度100％元素內的最大高度元素

我想弄清楚爲什麼Safari不會讀取其父項的最大高度屬性作爲高度。 Chrome和Firefox都會正確讀取它，但Safari似乎忽略父級的最大高度，而是抓取頁面的全高。Safari高度100％元素內的最大高度元素

你可以看到它here

CSS：

body, html { 
    height: 100%; 
    margin: 0; 
} 
div { 
    height: 100%; 
    max-height: 300px; 
    width: 100px; 
} 
div span { 
    background: #f0f; 
    display: block; 
    height: 100%; 
}

標記：

<div> 
    <span></span> 
</div>

我使用Safari 6.0.5在OSX 10.8.5。

來源

2013-10-01 Chad

好像[這個bug（https://bugs.webkit.org/show_bug.cgi?id=26559）負責。這裏還有一個關於它的[答]（http://stackoverflow.com/a/8468131/1456376）。我唯一的解決方案是加入'div {position：absolute; }'，[在這裏試試]（http://jsfiddle.net/nbVXN/）。 – insertusernamehere

@insertusernamehere這裏完美。我仍然討厭野生動物園;）如果你把它作爲答案，我會接受它。 – Chad

由於此問題恰好在Webkit的一個報告的bug：

Bug 26559 - When a block's height is determined by min-height/max-height, children with percentage heights are sized incorrectly

這似乎是現在固定爲Chrome，而不是Safari瀏覽器。

div {  
    position: absolute; 
}

演示出現

Try before buy

來源

2013-10-01 16:10:44 insertusernamehere

固定定位工程也是如此。謝謝！ – Chad

@insertusername這裏，但是你想在第二個後面建立兩個div的情況如何？拿走你的HTML並複製它，然後將複製的div放在原始文件後面。你能看到副本嗎？... – user2783091

類似問題上的Safari瀏覽器，如果：

唯一的非JavaScript的解決方法爲我工作，在父元素上使用絕對定位父元素使用flexbox屬性 - 容器不會佔用100％的高度。另一種解決方案（除了position: absolute;）是使用vh（視高度）單位：

div { 
height: 100vh; 
}

來源

2017-06-29 07:50:18

Safari高度100％元素內的最大高度元素

回答

相關問題