CSS最大高度不起作用答案

【问题标题】：CSS max-height not workingCSS最大高度不起作用
【发布时间】：2017-09-13 23:10:53
【问题描述】：

我有一个非常简单的问题，当我希望 div 垂直滚动时，我需要一个 div 来扩展以适应其内容，除非高度达到一定大小。作为测试，我创建了一个页面，其中包含：

<div style="width:300px;max-height:25px;background-color:green;overflow:auto;">
    1<br />
    2<br />
    3<br />
    4<br />
    5
</div>

不幸的是，最大高度似乎不起作用。我做错了什么？

我使用的是 IE7。

【问题讨论】：

标签： html css

【解决方案1】：

问题在于您的浏览器。也许您可以将此 div 包装在另一个具有 25px 固定高度的 div 中。当然，这不会与 max-height 完全相同。

An article about a solution.

编辑： According to Microsoft 它应该可以在 IE7+ 中使用。

您是否设置了合适的文档类型？如果不是 IE7 使用旧的布局引擎。您应该使用 HTML 4 或 XHTML。

【讨论】：

【解决方案2】：

这是设置最小高度的跨浏览器方法：

min-height: 400px;
height:auto !important;
height:400px;

IE 将 height 属性视为 min-height，而忽略 min-height。

编辑：将问题误读为最小高度！ (>_

【讨论】：

这会解决最大高度问题吗？
据我所知。我认为您需要使用 CSS 表达式 (ugh) 或 javascript 来修复最大高度。这仅适用于 IE 将高度视为最小高度，并将使用最后一条规则出现，因此它忽略了“自动”。如果你让它工作，虽然我很想知道:)。
height: auto; 和 min-height 一起为我工作

【解决方案3】：

你的代码对我有用。

当我用页包裹它时！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>1 2 3 4 5</title>
</head>

<body>
<div style="width:300px;max-height:25px;background-color:green;overflow:auto;">
    1<br />
    2<br />
    3<br />
    4<br />
    5
</div>
</body>

</html>

在 IE7 和 Chrome 中运行良好。

FF3 没有给我滚动条。

但是最大高度在所有三个中都可以正常工作。

如果没有周围的页面，尽管您的 sn-p 代码不起作用。我建议在有效的 HTML 页面中测试代码。 *咧嘴一笑*

【讨论】：

那是因为您拥有的文档类型。不幸的是，我不能使用那个 doctype，因为它会干扰我们使用的控制集。
你需要使用什么文档类型，我来解决。
解决了 FireFox 的问题，max-height 对滚动条 chrome 来说太小了，导致它消失了。
我不需要文档类型。一旦我设置了一个文档类型，控制集就变得很糟糕——主要是因为它使用表格来展示同样的问题。