Firefox 中忽略的最大高度，适用于 Chrome 和 Safari答案

【问题标题】：Max-height ignored in Firefox, works in Chrome and SafariFirefox 中忽略的最大高度，适用于 Chrome 和 Safari
【发布时间】：2011-04-24 23:06:31
【问题描述】：

我正在制作带有 display 类的图像幻灯片。我想将图像的高度和宽度限制为最大窗口的 80%，这样就不需要任何正常大小的滚动条。这是我使用的 CSS：

.display {
    max-width: 80%;
    max-height: 80%;
}

它的工作方式与我希望它在 Chrome 和 Safari 中的工作方式完全相同，并且 Firefox 也承认最大宽度。但是 Firefox 忽略了最大高度，所以大的垂直图像会离开屏幕。

非常感谢您的帮助。

【问题讨论】：

标签： firefox cross-browser css

【解决方案1】：

您需要告诉浏览器 html 高度和 body 高度。然后它根据这些尺寸计算高度。以下适用于所有凉亭。

html { height: 100%; }

body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

.display {
    max-width: 80%;
    max-height: 80%;
    overflow: hidden;
}

这里有一个工作示例：http://jsfiddle.net/P7wfm/

如果您不想在图像超过 80% 的高度或宽度时裁剪图像，请将 img 高度设置为

.display img {
    min-height: 100%;
    min-width: 100%;
}

【讨论】：

【解决方案2】：

我同意@Uds，你需要指定body和html元素的height和width

要记住的其他事项：

此外，您还需要在 CSS 代码中定义浏览器，您可以通过以下方式定义：

.display{
  /* For general browser */
  max-width: 80%;
  max-height: 80%;

  /* For Firefox browser */
  -moz-width: 80%;
  -moz-height:80%;

  /* For Chrome and Safari browser */
  -webkit-width: 80%;
  -webkit-height:80%;

  /* For Opera browser */
  -o-width: 80%;
  -o-height:80%;
}

这将指定哪个浏览器应该有什么样的高度或宽度。

【讨论】：

在身体上指定高度为我修复了它。不需要宽度声明。谢谢。

【解决方案3】：

您需要为容器元素或主体设置高度：

body {
    height:100%;
    min-height:100%;
}

【讨论】：

【解决方案4】：

尝试了建议的解决方案但没有成功，在 Firefox 62.0 上，最大高度动画被忽略。

当 max-height 属性与动画的持续时间相匹配时，也会有延迟。

【讨论】：

【解决方案5】：

我今天遇到了同样的问题，但是我无法将所有父母元素设置为 100% 的高度。
我在这里找到了解决此问题的另一种方法的线索：

https://developer.mozilla.org/en-US/docs/Web/CSS/max-height

您不仅可以将 % 分配给最大高度，还可以分配“em”，因此如果您将 html 和 body 设置为 100% 的字体大小，这类似于百分比宽度。

<div>
 <p>
    <img src="" alt="">    
 </p>
</div>

html,body{
font-size: 100%;
}

img{
max-width: 100%;
max-height: 50em;
}

DEMO

【讨论】：

【解决方案6】：

将max-heigth 更改为80vh 对我有用。

【讨论】：