Html CSS 最大高度不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/520710/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS max-height not working
提问by Baffled by ASP.NET
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. As a test, I created a page containing:
我有一个非常简单的问题，当我希望 div 垂直滚动时，我需要一个 div 来扩展以适应其内容，除非高度达到特定大小。作为测试，我创建了一个包含以下内容的页面：
<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。
采纳答案by Georg Sch?lly
The problem is your browser. Maybe you could wrap this div in another div that has the fixed height of 25px. Of course this wouldn't be exactly the same as max-height.
问题是你的浏览器。也许您可以将这个 div 包装在另一个具有 25px 固定高度的 div 中。当然，这与 max-height 不完全相同。
Edit:According to Microsoftit should work in IE7+.
编辑：根据微软的说法，它应该可以在 IE7+ 中运行。
Have you set an appropriate doctype? If not IE7 uses an old layout engine. You should use HTML 4 or XHTML.
您是否设置了适当的文档类型？如果不是 IE7 使用旧的布局引擎。您应该使用 HTML 4 或 XHTML。
回答by TJ L
Here's the cross-browser way to set min-height:
这是设置最小高度的跨浏览器方式：
min-height: 400px;
height:auto !important;
height:400px;
IE treats the height attribute as min-height, and ignores min-height.
IE 将高度属性视为 min-height，而忽略 min-height。
Edit: Misread the question as min-height! (>_<)
编辑：将问题误读为最小高度！(>_<)
回答by Iain M Norman
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. * grins *
尽管您的代码片段不起作用，但没有周围的页面。我建议在有效的 HTML 页面中测试代码。* 咧嘴笑 *
