鈣（100％ - 300像素），在Safari上沒有的Firefox或Chrome

Question

幹活這是我的HTML/CSS：

#all { 
 
    text-align: center; 
 
} 
 
.photo_img { 
 
    width: auto; 
 
    max-height: -webkit-calc(100% - 300px); 
 
    max-height: -moz-calc(100% - 300px); 
 
    max-height: calc(100% - 300px); 
 
    margin: 0; 
 
    padding: 0; 
 
    margin-top: 150px; 
 
}

<div id="all"> 
 
    <img src="http://40.media.tumblr.com/ed8f597aae5d145a51a13a7eaddac58e/tumblr_nlh3w0m4GS1u4c0gpo1_1280.jpg" class="photo_img"> 
 
</div>

我不知道爲什麼它僅適用於Safari瀏覽器。 你能幫我讓它跨瀏覽器嗎？

https://jsfiddle.net/q3fwavq5/

Answer 1

的問題是，你正在使用的100%基於百分比的高度。 .photo_img元素的高度決定了父元素的高度（因爲它是唯一的子元素），因爲它們與任何東西都不相關，所以渲染基於百分比的單位無用。爲了解決這個問題，你需要以百分比設置父元素的高度。這樣做，.photo_img可以有一個最大高度calc(100% - 300px)相對到父元素。

您可以設置html/body/#all元素有100%的高度。（上只是#all一個固定的高度會工作爲好）。

Updated Example

html, body, #all { 
    height: 100%; 
} 

或者，你可以使用viewport-relative units而非基於個單位。這樣做時，高度基於視口的100%（而不是直接包含的父元素）。

Updated Example

.photo_img { 
    max-height: calc(100vh - 300px); 
}