CSS最大高度属性

Question

是否有一个很好的跨浏览器的方式来设置一个DIV的最大高度属性，当该DIV超出最大高度，它变成溢出与滚动条？

Answer 1

你可以有一个高度设置为高度和溢出的包装div：滚动。然后内部div没有高度集，随着它的增长，它将填充然后使用第一个div的滚动条？

Answer 2

可悲的是IE6不那么你必须使用对IE6的表达式，然后将所有其他浏览器的最大高度：

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; 
} 

溢出：汽车会在大多数情况下，有什么最有可能的工作额外溢出。

Answer 3

我从2005年发布的帖子中找到了这个解决方案（Min-Height Fast hack）。这是一个黑客，但它的简单和纯粹的CSS：

selector { 
    max-height:500px; 
    height:auto !important; 
    height:500px; 
} 

的例子是最大高度，但它适用于最小高度，最小宽度和最大宽度。 :)

*注意：您必须使用绝对值，百分比不起作用。

现在您只需要“溢出：滚动”;使这个滚动条的工作

Answer 4

selector 
{ 
    max-height:900px; 
    _height:expression(this.scrollHeight>899?"900px":"auto"); 
    overflow:auto; 
    overflow-x:hidden; 
} 

Answer 5

我发现这从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> 

Answer 6

主要的黑客（RedWolves式）：

.divMax{width:550px;height:200px;overflow-Y:auto;position:absolute;} 
.divInner{border:1px solid navy;background-color:white;} 

我是从最大高度，没有得到爱的属性，所以我有这个alreadyand成功与这些2类。但它在寻找更好的命中这个问题是丑陋的。具有position:absolute的divMax可让内容显示下来，但将divInner的最终高度控制为200px。