CSS max-height无效

Question

I have a very simply problem where I need a div to expand to fit its contents unless the height reaches a certain size, when I want the div to scroll vertically instead. 我有一个非常简单的问题，我需要一个div来扩展以适应其内容，除非高度达到一定的大小，当我希望div垂直滚动时。 As a test, I created a page containing: 作为测试，我创建了一个页面，其中包含：

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

Unfortunately, the max-height doesn't seem to work. 不幸的是，最大高度似乎不起作用。 What am I doing wrong? 我究竟做错了什么？

I am using IE7. 我正在使用IE7。

Answer 1

The problem is your browser. 问题是你的浏览器。 Maybe you could wrap this div in another div that has the fixed height of 25px. 也许你可以将这个div包装在另一个固定高度为25px的div中。 Of course this wouldn't be exactly the same as max-height. 当然，这与max-height不完全相同。

An article about a solution. 一篇关于解决方案的文章。

Edit: According to Microsoft it should work in IE7+. 编辑： 根据微软，它应该在IE7 +中工作。

Have you set an appropriate doctype? 您是否设置了适当的doctype？ If not IE7 uses an old layout engine. 如果不是IE7使用旧的布局引擎。 You should use HTML 4 or XHTML. 您应该使用HTML 4或XHTML。

Answer 2

Here's the cross-browser way to set min-height: 这是设置min-height的跨浏览器方式：

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

IE treats the height attribute as min-height, and ignores min-height. IE将height属性视为min-height，并忽略min-height。

Edit: Misread the question as min-height! 编辑：将问题误读为最小高度！ (>_<) （> _ <）

Answer 3

Your code works for me. 你的代码适合我。

When I wrap it with a page! 当我用页面包装它！

<!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>

Works in IE7 and Chrome fine. 适用于IE7和Chrome。

FF3 is not giving me scrolls bars. FF3不给我滚动条。

But the max height works fine in all three. 但是这三个最大高度都很好。

Without the surrounding page though your snippet of code does not work. 没有周围的页面虽然你的代码片段不起作用。 I suggest testing code in a valid page of HTML. 我建议在HTML的有效页面中测试代码。 * grins * *笑脸*

CSS max-height无效

问题描述

3 个解决方案

解决方案1
9 已采纳 2009-02-06 15:34:02

解决方案2
6 2009-02-06 15:30:25

解决方案3
2 2009-02-06 15:37:47

CSS max-height无效

问题描述

3 个解决方案

解决方案1 9 已采纳 2009-02-06 15:34:02

解决方案2 6 2009-02-06 15:30:25

解决方案3 2 2009-02-06 15:37:47

解决方案1
9 已采纳 2009-02-06 15:34:02

解决方案2
6 2009-02-06 15:30:25

解决方案3
2 2009-02-06 15:37:47