Question

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

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

不幸的是，max-height似乎不起作用。我做错了什么？

我正在使用IE7。

Answer 1

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

An article about a solution.

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

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

Answer 2

以下是设置min-height的跨浏览器方式：

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

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

编辑：将问题误读为最小高度！（大于_≤）

Answer 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没有给我滚动条。

但是这三个最大高度都可以正常工作。

虽然您的代码片段不起作用但没有周围的页面。我建议在HTML的有效页面中测试代码。 *笑嘻嘻*

CSS max-height无效

3 个答案: