钙（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); 
}