calc (100% - 300px) 在非 Firefox 或 Chrome 的 Safari 上工作

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

calc (100% - 300px) 在非 Firefox 或 Chrome 的 Safari 上工作

calc (100% - 300px) working on Safari not of Firefox or Chrome

html

css

safari