CSS 最大高度属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/297686/
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 Property
提问by Ryan Smith
Is there a good cross-browserway to set a max-heightproperty of a DIV and when that DIV goes beyond the max-height, it turns into an overflow with scrollbars?
是否有一种很好的跨浏览器方式来设置max-heightDIV的属性，当该 DIV 超出 时max-height，它会变成滚动条溢出？
回答by ethyreal
Sadly IE6 doesn't so you have to use an expression for IE6, then set the max-height for all other browsers:
遗憾的是 IE6 没有，所以你必须为 IE6 使用一个表达式，然后为所有其他浏览器设置 max-height：
div{
_height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE6 */
max-height: 333px; /* sets max-height value for all standards-compliant browsers */
overflow:scroll;
}
Overflow:auto would most likely work in most cases for have any extra spill over.
溢出：自动最有可能在大多数情况下工作，因为有任何额外的溢出。
回答by Mottie
I found this solution from a post made in 2005 (Min-Height Fast hack). It's a hack but it's simple and pure CSS:
我从 2005 年发表的一篇文章（Min-Height Fast hack）中找到了这个解决方案。这是一个 hack 但它是简单而纯粹的 CSS：
selector {
max-height:500px;
height:auto !important;
height:500px;
}
The example is for max-height, but it works for min-height, min-width and max-width. :)
该示例适用于 max-height，但它适用于 min-height、min-width 和 max-width。:)
*Note: You must use absolute values, percentages don't work.
*注意：您必须使用绝对值，百分比不起作用。
All you need now is the "overflow:scroll;" to make this work with scroll bars
您现在需要的只是“溢出：滚动；” 使这项工作与滚动条
回答by KrisK
selector
{
max-height:900px;
_height:expression(this.scrollHeight>899?"900px":"auto");
overflow:auto;
overflow-x:hidden;
}
回答by RedWolves
Could you have a wrapper div with the height set as your height and overflow: scrolling. Then the inner div has no height set and as it grows it will fill then use the scrollbars of the first div?
您是否可以将高度设置为高度的包装 div 和溢出：滚动。然后内部 div 没有设置高度，随着它的增长它会填充然后使用第一个 div 的滚动条？
回答by gordon
Major hack (RedWolves-style):
主要黑客（红狼风格）：
.divMax{width:550px;height:200px;overflow-Y:auto;position:absolute;}
.divInner{border:1px solid navy;background-color:white;}
I was getting no love from the max-height attribute so I had this alreadyand succeeded with these 2 classes. But it's ugly so in searching for better hit this question. divMax having position:absolutelets content underneath show through but controls the ultimate height of divInner to 200px.
我没有从 max-height 属性中得到爱，所以我已经有了这个并且在这两个类中取得了成功。但它很难看，所以在寻找更好的问题时会遇到这个问题。divMaxposition:absolute让下面的内容显示出来，但将 divInner 的最终高度控制为 200px。
回答by Zhou
I found this from http://www.tutorialspoint.com/css/css_scrollbars.htmand modified a bit. It seems working for both IE9 and FF19
我从http://www.tutorialspoint.com/css/css_scrollbars.htm找到了这个并做了一些修改。它似乎适用于 IE9 和 FF19
<style type="text/css">
.scroll{
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
max-height:100px;
overflow:scroll;
}
.auto{
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height: 100px !important;
max-height:110px;
overflow:hidden;
overflow-y:auto;
}
</style>
<p>Example of scroll value:</p>
<div class="scroll">
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.<br/>
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.<br/>
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.<br/>
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.<br/>
</div>
<br />
<p>Example of auto value:</p>
<div class="auto">
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.<br/>
</div>
