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。