Question

这是我的HTML / CSS：

＆＃13;

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

＆＃13;

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

＆＃13;

我不知道为什么它仅适用于Safari。你能帮助我跨浏览器吗？

https://jsfiddle.net/q3fwavq5/

Answer 1

问题是您使用的是基于百分比的100%高度。 .photo_img元素的高度决定了父元素的高度（因为它是唯一的子元素），它使基于百分比的单位无用，因为它们与任何东西都不相关。要解决此问题，您还需要以百分比形式设置父元素的高度。这样，.photo_img的父元素的最大高度为calc(100% - 300px) relative 。

您可以将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）在Safari上工作，而不是Firefox或Chrome

1 个答案: