html - calc (100% - 300px) 在 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而不是基于百分比的单位。这样做时，高度基于视口(viewport)的 100%(而不是直接包含的父元素)。

Updated Example

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